jQuery Validate 基本使用以及实例

简单来说，使用jQuery Validate做前台校验的核心步骤有以下几个：
1，为需要校验的输入框添加对应的校验标识，比如密码输入框要加一个 password的校验标识。
2，jQuery Validate根据校验标识查找对应的校验规则。
3，根据校验规则和输入框的值进行判断是否校验通过，如果不通过则查找对应的提示信息显示。
4，全部校验通过则可以发送请求或者提交表单。

其中校验规则是核心的部分，jQuery Validate提供了一些内置的校验规则，你也可以自子通过代码或者正则表达式自定义校验规则。
详细教程可以参考：http://www.runoob.com/jquery/jquery-plugin-validate.html

教程里面内容挺多的，我重点说一下，实际使用的情况，以及自定义校验规则。那么首先举个栗子
上代码：

引入js:
message的js你如果需要可以自己引入

<script src="js/jquery.js"></script>
<script src="js/jquery.validate.js"></script>
<script src="js/additional-methods.js"></script>

表单：

    <form class="layui-form" id="addForm" role="form" 　>
    <div class="layui-form-item">
    <label  class="layui-form-label">登录账号</label>
    <div class="layui-input-inline">
      <input type="text" name="loginName" id="loginName"  required  placeholder="请输入账号"  class="layui-input">
    </div>
     <div class="layui-form-mid layui-word-aux">
     <label for="loginName"></label></div>
  </div>
  <div class="layui-form-item">
    <label  class="layui-form-label">用户姓名</label>
    <div class="layui-input-inline">
      <input type="text" id="userName" name="userName" required  placeholder="请输入用户姓名" autocomplete="off" class="layui-input">
    </div>
    <div class="layui-form-mid layui-word-aux">
    <label for="userName"></label></div>
  </div>
  <div class="layui-form-item">
    <label  class="layui-form-label">登录密码</label>
    <div class="layui-input-inline">
      <input type="password" id="password" name="passwordx" required  placeholder="请输入密码" autocomplete="off" class="layui-input">
    </div>
    <div class="layui-form-mid layui-word-aux">
    <label for="password"></label></div>
  </div>
   <div class="layui-form-item"> 
<button type="reset" hidden id="reset"></button>
</form>
<div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" onclick="addUser()">提交</button>
      <button onclick="reset()" class="layui-btn layui-btn-primary">重置</button>
    </div>
</div>

校验代码：

$("#addForm").validate({
          //调整错误提示的位置和样式
          errorPlacement: function(error, element) {
                // Append error within linked label
                console.log(element);
                $( element )
                    .closest( "form" )
                        .find( "label[for='" + element.attr( "id" ) + "']" )
                            .append(error);
            },
            errorElement: "font",
            //校验规则 name="password",validatemethod name="passwordx"
            rules:{
                userName:"userName",
                passwordx:"passwordCopyx"
                },          
        });

按钮事件监听js:

function addUser(){    
    var password = md5($('#password').val());
    var passwordCopy = md5($('#passwordCopy').val());
    var loginName = $('#loginName').val();
    if($("#addForm").valid()){
    alert("校验全部通过了！");
    }

这里有几个要注意的，首先校验要先获取表单，然后设置一下错误信息提示的展示方式，我这里因为要调整页面样式所以用的是font标签展示错误信息，那要看你自己的页面上输入框的排版样式，可以自己调节，errorElement: “font”,这里可以用label,p标签都可以。然后重点是 rules里面是校验标识和校验规则的对应关系，前面是校验表示，就是input的name 和id最好保持相同
<input type="text" name="loginName" id="loginName" 也就是
<label for="loginName"> for中的名称，后边对应的就是校验规则的名称就是 addMethod中添加的自定义校验方法的名字，那么重点来了，自定义的校验规则在哪呢？

就写在这个js中，是自定义的，
我这边的校验都是用的正则表达式

$.validator.addMethod("passwordCopyx", function(value, element) {   
    var tel = /^[\w.]{6,12}$/;
    return  tel.test(value);
},$.validator.format("*长度必须在5-10位之间，由数字或字母组成"));

$.validator.addMethod("loginName", function(value, element) {   
    var tel = /^([a-zA-Z]{1})(\w{1,11})$/;
    return  tel.test(value);
},$.validator.format("*长度在2-10位之间，必须以字母开头可以有数字不能有符号"));

其中提示信息可以在自定义校验规则里加，也可以在message.js里面加也可以写到validate.js里面,如果三个地方都写了提示信息，那么优先显示validate.js里面的提示信息
这是validate.js

messages: {
        passwordx:"*长度必须在5-10位之间，由数字或字母组成！",
        passwordCopyx:"*长度必须在5-10位之间，由数字或字母组成！",
        required: "*不能为空！",
        mobileNumber:"*电话格式不正确！",
        teleNumber:"手机号码格式不正确！",
        remote: "Please fix this field.",
        email: "*邮箱格式不正确！",
        url: "Please enter a valid URL.",
        date: "Please enter a valid date.",
        dateISO: "Please enter a valid date ( ISO ).",
        number: "Please enter a valid number.",
        digits: "Please enter only digits.",
        creditcard: "Please enter a valid credit card number.",
        equalTo: "Please enter the same value again.",
        maxlength: $.validator.format( "Please enter no more than {0} characters." ),
        minlength: $.validator.format( "Please enter at least {0} characters." ),
        rangelength: $.validator.format( "Please enter a value between {0} and {1} characters long." ),
        range: $.validator.format( "Please enter a value between {0} and {1}." ),
        max: $.validator.format( "Please enter a value less than or equal to {0}." ),
        min: $.validator.format( "Please enter a value greater than or equal to {0}." )
    },

这是message.js

$.extend($.validator.messages, {
    required: "*不能为空",
    remote: "请修正此字段",
    email: "请输入有效的电子邮件地址",
    url: "请输入有效的网址",
    date: "请输入有效的日期",
    dateISO: "请输入有效的日期 (YYYY-MM-DD)",
    number: "请输入有效的数字",
    digits: "只能输入数字",
    creditcard: "请输入有效的信用卡号码",
    mobileNumber:"*电话格式不正确",
    teleNumber:"*请输入正确的手机号码",
    input:"整数",
    equalTo: "你的输入不相同",
    /*password:"*密码格式不对！",
    passwordx:"*密码格式不对！",
    passwordCopyx:"*确认密码格式不对！",*/
    extension: "请输入有效的后缀",
    isZipCode: "只能包括中文字、英文字母、数字和下划线",
    maxlength: $.validator.format("最多可以输入 {0} 个字符"),
    minlength: $.validator.format("最少要输入 {0} 个字符"),
    rangelength: $.validator.format("请输入长度在 {0} 到 {1} 之间的字符串"),
    range: $.validator.format("请输入范围在 {0} 到 {1} 之间的数值"),
    max: $.validator.format("请输入不大于 {0} 的数值"),
    min: $.validator.format("请输入不小于 {0} 的数值")
});

运行效果：