jQuery Validate插件实现表单验证

下面是关于“jQuery Validate插件实现表单验证”的完整攻略。

一、什么是jQuery Validate插件

jQuery Validate是一个简单易用的jQuery表单验证插件，它可以实现各种常见的表单验证功能，如必填、长度验证、数字验证、邮箱验证、手机号验证、密码强度验证等等。

二、使用jQuery Validate插件

使用jQuery Validate插件非常简单，只需引入jquery.js和jquery.validate.js两个文件，并按照插件提供的规则在表单中添加data-validation属性即可。

下面是一个简单的示例：

<form id="myForm">
  <label for="name">姓名：</label>
  <input type="text" name="name" data-validation="required length" data-validation-length="6-20" />
  <br />
  <label for="email">邮箱：</label>
  <input type="text" name="email" data-validation="required email" />
  <br />
  <label for="password">密码：</label>
  <input type="password" name="password" data-validation="required validation-password" />
  <br />
  <input type="submit" value="提交" />
</form>

<script src="jquery.js"></script>
<script src="jquery.validate.js"></script>
<script>
  $(function(){
    $('#myForm').validate();
  });
</script>

在上面的示例中，我们新建了一个表单，并对其中的姓名、邮箱、密码三个字段添加了不同的验证规则，如必填、长度验证、邮箱验证、密码强度验证等。然后调用$('#myForm').validate()方法对表单进行验证。

三、jQuery Validate插件的常用规则

下面是jQuery Validate插件的常用规则，供参考：

规则	描述
required	必填项
email	邮箱格式
url	网址格式
date	日期格式
number	数字格式
digits	整数格式
creditcard	信用卡格式
equalTo	等于某元素的值
minlength	最小长度
maxlength	最大长度
rangelength	长度范围
min	最小值
max	最大值
range	数值范围
remote	远程验证

四、jQuery Validate插件的自定义规则

除了上述常用规则，我们还可以通过调用addMethod()方法自定义规则。例如下面这个示例：

$.validator.addMethod('validation-password', function(value, element){
  return this.optional(element) || /[a-zA-Z]+/.test(value) && /\d+/.test(value) && /[!@#$%^&*]+/.test(value);
}, '密码必须包含字母、数字、特殊字符');

在上面的示例中，我们自定义了一个名为validation-password的规则，规则的验证函数中判断了密码是否包含字母、数字、特殊字符。

五、jQuery Validate插件的其他用法

除了上述常用规则和自定义规则外，我们还可以使用其他一些方法和属性来实现更高级的验证功能。例如：

• ignore属性：忽略某些表单元素的验证；
• errorClass属性：设置错误提示样式；
• errorPlacement方法：自定义错误提示的位置；
• success方法：自定义验证通过后的回调函数。

六、示例说明

下面是两个使用jQuery Validate插件实现表单验证的示例，供参考：

示例一：实现手机号验证

<form id="myForm">
  <label for="phone">手机号：</label>
  <input type="text" name="phone" data-validation="required mobilenumber" />
  <br />
  <input type="submit" value="提交" />
</form>

<script src="jquery.js"></script>
<script src="jquery.validate.js"></script>
<script>
  $.validator.addMethod('mobilenumber', function(value, element){
    return this.optional(element) || /^1[34578]\d{9}$/.test(value);
  }, '手机号格式不正确');

  $(function(){
    $('#myForm').validate();
  });
</script>

在上面的示例中，我们添加了一个自定义规则mobilenumber，来验证手机号是否正确。

示例二：实现文件上传大小限制

<form id="myForm" enctype="multipart/form-data">
  <label for="photo">上传照片：</label>
  <input type="file" name="photo" data-validation="required maxsize" data-validation-maxsize="2M" />
  <br />
  <input type="submit" value="提交" />
</form>

<script src="jquery.js"></script>
<script src="jquery.form.js"></script>
<script src="jquery.validate.js"></script>
<script>
  $.validator.addMethod('maxsize', function(value, element){
    var size = element.files[0].size;
    var maxSize = $(element).data('validationMaxsize').toUpperCase();
    var units = maxSize.match(/^([\d\.]+)\s*(.*)$/);
    var sizeValue = parseFloat(units[1]);
    var sizeUnit = units[2];
    var maxSizeBytes = sizeValue;
    switch (sizeUnit) {
      case 'KB': maxSizeBytes *= 1024; break;
      case 'MB': maxSizeBytes *= 1024 * 1024; break;
      case 'GB': maxSizeBytes *= 1024 * 1024 * 1024; break;
    }
    return this.optional(element) || size <= maxSizeBytes;
  }, '文件大小不能超过{0}');

  $(function(){
    $('#myForm').validate({
      ignore: ':hidden',
      errorClass: 'invalid',
      errorPlacement: function(error, element){
        element.after(error);
      }
    });
  });
</script>

在上面的示例中，我们添加了一个自定义规则maxsize，来验证文件的大小是否超过限制。另外，还利用了jQuery Form插件来实现异步文件上传功能。