jquery.validate简单使用

jquery.validate插件可是使我们实现功能各种复杂功能的验证，而且jquery.validate插件使用非常简单

插件安装

<script src="js/jQuery/jquery-3.2.1.js" type="text/javascript"></script>  
<script src="js/jQuery/jquery.validate.js" type="text/javascript"></script>  
<script src="js/jQuery/messages_zh.js" type="text/javascript"></script>

## 使用自带的验证规则
`jquery.validate`自带了很多验证规则，包括是否数字，最大、最小字符长度，以及长度范围、是否邮箱、两个控件值是否相等等等。我们在项目上一般是习惯把验证放到js代码块中，如下是一个简单的用户注册页面的验证规则
​```js
$(function(){  
    $("#singnUp").validate({  
        debug:true,//只验证   不提交表单  
        rules:{  
          firstName:{  
              required:true,  
              minlength:2  
          },  
          lastName:{  
            required:true,  
            maxlength:8  
          },  
          userName:{  
            required:true,  
            minlength:5,  
            maxlength:10  
          },  
          pwd:{  
            required:true,  
            minlength:8,  
            maxlength:20  
          },  
          pwd2:{  
            required:true,  
            minlength:8,  
            equtalTo:"#pwd"  
          },  
          email:{  
            required:true,  
            email:true  
          },  
          zipCode:{  
            isZipCode:true  
          }  
        },  
        messages:{  
          firstName:{  
            required:"请输入用户姓",  
            minlength:"用户名不能小于两位字符"  
          }  
        }  
    });  
});  
</script>
<style>  
.error{  
color:red;  
}  
</style>  
  
<form action="" method="get" class="panel-body" id="singnUp">  
  <fieldset>  
    <legend>用户注册</legend>  
        <p>  
          <label for="firstName">姓</label>  
          <input type="text" id="firstName" name="firstName"/>  
        </p>  
        <p>  
            <label for="lastName">名</label>  
            <input type="text" id="lastName" name="lastName" />  
        </p>  
        <p>  
          <label for="userName">用户名</label>  
          <input type="text" id="userName" name="userName" />  
        </p>  
        <p>  
          <label for="password">密码</label>  
          <input type="password" id="pwd" name="pwd" />  
        </p>  
        <p>  
          <label for="pwd2">重复密码</label>  
          <input type="password" id="pwd2" name="pwd2" />  
        </p>  
        <p>  
          <label for="email">邮箱</label>  
          <input type="email" id="email" name="email" />  
        </p>  
        <p>  
          <label for="zipCode">邮政编码</label>  
          <input type="text" id="zipCode" name="zipCode" />  
        </p>  
  <button type="submit">提交</button>  
</fieldset>  
</form>

添加自定义验证方法

对于不能满足条件的验证，我们还可以添加自己的验证方法，如下：

jQuery.validator.addMethod("isZipCode",function(value,element,param){  
  var tel = /^[0-9]{6}$/;  
  return this.optional(element) || (tel.test(value))  
},'请输入正确的邮政编码');  

然后在验证规则中调用isZipCode:true就可以了

其他一些属性

在我们调试的过程中，常常是希望只触发验证条件，但是不提交表单，那么我们可以设置isDebug:true就可以了

未完待续。。。。。。