jQuery实现动态表单验证时文本框抖动效果完整实例

下面是“jQuery实现动态表单验证时文本框抖动效果完整实例”的完整攻略：

一、实现原理

在实现表单验证时，当用户输入错误或者未输入时，我们需要给出错误提示。为了提高提示的视觉效果，在文本框出现抖动的动画后，再展示错误提示信息。

具体实现过程如下：

1. 给输入框添加失去焦点的事件，当输入框失去焦点时对输入框的值进行验证；
2. 如果验证不通过，使用jQuery的动画效果来使输入框发生抖动，再给出错误提示信息；如果验证通过，则不需要进行动画；
3. 在动画结束后，将错误提示信息隐藏。

二、具体实现步骤

以下是表单验证的完整例子，包括用户名、密码、联系方式的验证：

1. HTML 代码

<form>
  <div>
    <label>用户名：</label>
    <input type="text" id="username"/>
    <span class="error">用户名不能为空</span>
  </div>
  <div>
    <label>密码：</label>
    <input type="password" id="password"/>
    <span class="error">密码不能为空</span>
  </div>
  <div>
    <label>联系方式：</label>
    <input type="text" id="phone"/>
    <span class="info">请填写正确的联系方式</span>
  </div>
  <button type="submit">提交</button>
</form>

1. CSS 代码

.error {
  color: red;
  display: none;
}

.info {
  color: gray;
  display: none;
}

1. JavaScript 代码

$(document).ready(function() {
  $("#username").blur(function() {
    var username = $(this).val();
    if (!username) {
      $(this).animate({left: "-10px"}, 50).animate({left: "10px"}, 100)
             .animate({left: "-10px"}, 100).animate({left: "10px"}, 100)
             .animate({left: "0px"}, 50);
      $(this).siblings(".error").show();
    } else {
      $(this).siblings(".error").hide();
    }
  });

  $("#password").blur(function() {
    var password = $(this).val();
    if (!password) {
      $(this).animate({left: "-10px"}, 50).animate({left: "10px"}, 100)
             .animate({left: "-10px"}, 100).animate({left: "10px"}, 100)
             .animate({left: "0px"}, 50);
      $(this).siblings(".error").show();
    } else {
      $(this).siblings(".error").hide();
    }
  });

  $("#phone").blur(function() {
    var phone = $(this).val();
    if (!/^1\d{10}$/.test(phone)) {
      $(this).animate({left: "-10px"}, 50).animate({left: "10px"}, 100)
             .animate({left: "-10px"}, 100).animate({left: "10px"}, 100)
             .animate({left: "0px"}, 50);
      $(this).siblings(".info").show();
    } else {
      $(this).siblings(".info").hide();
    }
  });
});

以上代码的实现原理如下：

1. 使用jQuery选择器选中username、password和phone等文本框元素，并将失去焦点事件绑定到它们身上；
2. 在失去焦点事件中，先获取输入框的值，如果该值为空或者不合法（例如联系方式不是符合手机号格式），那么使用animate()函数来使文本框发生左右抖动的效果；
3. 动画结束后，显示相应的错误/提示信息。

三、示例说明

假设我们要实现一个表单，要求用户在用户名、密码和联系方式中都需要填写内容。

下面是对这个需求的具体实现过程：

1. 首先，我们需要使用HTML代码定义一个表单，表单中需要包含用户名、密码和联系方式等表单元素；
2. 然后，通过CSS设置错误提示信息的样式，使它们默认隐藏，当需要展示的时候再显示出来；
3. 最后，使用jQuery实现失去焦点时提示信息的显示隐藏以及抖动动画等效果即可。

以下是代码示例：

1. HTML 代码

<form>
  <div>
    <label>用户名：</label>
    <input type="text" id="username"/>
    <span class="error">用户名不能为空</span>
  </div>
  <div>
    <label>密码：</label>
    <input type="password" id="password"/>
    <span class="error">密码不能为空</span>
  </div>
  <div>
    <label>联系方式：</label>
    <input type="text" id="phone"/>
    <span class="info">请填写正确的联系方式</span>
  </div>
  <button type="submit">提交</button>
</form>

1. CSS 代码

.error {
  color: red;
  display: none;
}

.info {
  color: gray;
  display: none;
}

1. JavaScript 代码

$(document).ready(function() {
  $("#username").blur(function() {
    var username = $(this).val();
    if (!username) {
      $(this).animate({left: "-10px"}, 50).animate({left: "10px"}, 100)
             .animate({left: "-10px"}, 100).animate({left: "10px"}, 100)
             .animate({left: "0px"}, 50);
      $(this).siblings(".error").show();
    } else {
      $(this).siblings(".error").hide();
    }
  });

  $("#password").blur(function() {
    var password = $(this).val();
    if (!password) {
      $(this).animate({left: "-10px"}, 50).animate({left: "10px"}, 100)
             .animate({left: "-10px"}, 100).animate({left: "10px"}, 100)
             .animate({left: "0px"}, 50);
      $(this).siblings(".error").show();
    } else {
      $(this).siblings(".error").hide();
    }
  });

  $("#phone").blur(function() {
    var phone = $(this).val();
    if (!/^1\d{10}$/.test(phone)) {
      $(this).animate({left: "-10px"}, 50).animate({left: "10px"}, 100)
             .animate({left: "-10px"}, 100).animate({left: "10px"}, 100)
             .animate({left: "0px"}, 50);
      $(this).siblings(".info").show();
    } else {
      $(this).siblings(".info").hide();
    }
  });
});

通过以上代码，我们实现了一个在输入框未填写数据的时候，能够动态抖动并弹出错误提示的功能。再次强调，该攻略含有完整的HTML、CSS、JavaScript代码。