jquery_validator使用-杨标的博客

jQuery.validator插件使用

在页面填写表单的时候，我们经常需要将一些输入框做一些验证消息，如必填消息验证，如果二次密码的验证，以及邮箱身份证号等特殊信息的验证。在验证这些信息的过程当中，我们可以通过JS手动的去进行验证，但是这样效率会非常低下，这个时候，我们就可以使用第三方插件jQuery.validator来进行，该插件依赖于jQuery

下载插件

官方网址为http://jqueryvalidation.org/，我们可以进入官方网站下载该插件，也可以通过包管理工具npm去下载

npm install jquery-validation

使用规则

一、默认验证规则

验证规则	说明
required:true	必须填写
remote:”check.php”	使用ajax方法调用check.php验证输入值(check.php返回true或false字符串)
email:true	必须输入有效的电子邮件
url:true	必须输入有效的网址
date:true	必须入有效的日期
dateISO:true	必须入有效的日期 (YYYY-MM-DD)，例如：2014-06-25，1998/06/09 只验证格式，不验证有效性
number:true	必须输入正确的数字(负数，小数)
digits:true	只可输入数字
creditcard:true	必须输入有效的信用卡号码
equalTo:”#field”	必须输入和#field相同的值
extension	必须输入有效的后缀
maxlength:10	输入长度最多 10 个字符串(汉字算一个字符)
minlength:5	输入长度最少 5 个字符串(汉字算一个字符)
rangelength:[5,10]	输入长度为必须介于 5 至 10 之间的字符串(汉字算一个字符)
range:[5,10]	输入数值必须介于 5 至 10 之间
max:10	输入数值不能大于 10
min:5	输入数值不能小于 5

二、默认的提示

messages: {
    required: "This field is required.",
    remote: "Please fix this field.",
    email: "Please enter a valid email address.",
    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}." )
}

可以使用中文的提示，引入messages_zh.js（在src/localization目录中）

觉得麻烦,一次要引入两个js,可以拿中文的提示覆盖jquery.validate.js中的英文提示(反正我会这么干，毕竟多数情况都中文的)，如下：

messages: {
    required: "必须填写",
    remote: "请修正此栏位",
    email: "请输入有效的电子邮件",
    url: "请输入有效的网址",
    date: "请输入有效的日期",
    dateISO: "请输入有效的日期 (YYYY-MM-DD)",
    number: "请输入正确的数字",
    digits: "只可输入数字",
    creditcard: "请输入有效的信用卡号码",
    equalTo: "你的输入不相同",
    extension: "请输入有效的后缀",
    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} 的数值")
},

使用方式（两种）

将校验规则写到控件中

看了之前的别人写的文章，貌似是依赖jquery.metadata.js这个库，然后写的时候以 class=”required email” 这样的形式来写，这样写起来好像有些乱，class本身是呈现样式的，现在被附上各种校验的规则，看上去似乎有些乱，不过好在新版本中，又有了新的写法，不依赖上面的js库，以 data-rule-验证规则、data-msg-提示信息这样的格式来重新定义，更简单，更直观，更强大了。

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

<form id="registerForm" method="get" action="">
  <fieldset>
    <p>
      <label for="cusername">用户名</label>
      <input id="cusername" name="username" type="text" data-rule-required="true" data-rule-rangelength="[2,10]" data-msg-required="用户名不能为空" data-msg-rangelength="用户名长度必须是2到10个字符">
    </p>
    <p>
      <label for="cpassword">密码</label>
      <input id="cpassword" name="password" type="password" data-rule-required="true" data-rule-minlength="6" data-msg-required="密码不能为空" data-msg-minlength="至少设置6位密码">
    </p>
    <p>
      <label for="cconfirmpassword">确认密码</label>
      <input id="cconfirmpassword" name="confirmpassword" type="password" data-rule-equalTo="#cpassword" data-msg-equalTo="两次密码不一致">
    </p>
    <p>
      <label for="cemail">邮箱</label>
      <input id="cemail" name="email" data-rule-required="true" data-rule-email="true" data-msg-required="邮箱不能为空" data-msg-email="邮箱的格式不正确">
      </input>
    </p>
    <p>
      <label for="chasreferee">有推荐人请勾选</label>
      <input type="checkbox" id="chasreferee" name="hasreferee">
    </p>
    <p>
      <label for="creferee">推荐人</label>
      <input id="creferee" name="referee" data-rule-required="#chasreferee:checked" data-msg-required="推荐人不能为空">
      </input>
    </p>
    <p>
      <input type="submit" value="提交">
    </p>
  </fieldset>
</form>

将校验规则写到代码中

个人感觉第一种写法，更适合做软件开发或是网站后台，而第二种写法更适合做网站的前台，对页面加载速度有苛刻的要求的时候，可以把脚本代码封装成一个单独的js，以提高网页的加载速度。

<script src="../js/jquery.js"></script>
<script src="../js/jquery.validate.js"></script>
<script>
$().ready(function() {
  $("#registerForm").validate({

    rules: {
      username: {
        required: true,
        rangelength: [2, 20]
      },
      password: {
        required: true,
        minlength: 6
      },
      confirmpassword: {
        equalTo: "#cpassword"
      },
      email: {
        required: true,
        email: true
      },
      referee: {
        required: "#chasreferee:checked"
      }

    },
    messages: {
      username: {
        required: "用户名不能为空",
        rangelength: "用户名长度必须是2到10个字符"
      },
      password: {
        required: "密码不能为空",
        minlength: "至少设置6位密码"
      },
      confirmpassword: {
        equalTo: "两次密码不一致"
      },
      email: {
        required: "邮箱不能为空",
        email: "邮箱的格式不正确"
      },
      referee: {
        required: "推荐人不能为空"
      }
    }

  });
});
</script>

<form id="registerForm" method="get" action="">
  <fieldset>
    <p>
      <label for="cusername">用户名</label>
      <input id="cusername" name="username" type="text">
    </p>
    <p>
      <label for="cpassword">密码</label>
      <input id="cpassword" name="password" type="password">
    </p>
    <p>
      <label for="cconfirmpassword">确认密码</label>
      <input id="cconfirmpassword" name="confirmpassword" type="password">
    </p>
    <p>
      <label for="cemail">邮箱</label>
      <input id="cemail" name="email">
      </input>
    </p>
    <p>
      <label for="chasreferee">有推荐人请勾选</label>
      <input type="checkbox" id="chasreferee" name="hasreferee">
    </p>
    <p>
      <label for="creferee">推荐人</label>
      <input id="creferee" name="referee">
      </input>
    </p>
    <p>
      <input type="submit" value="提交">
    </p>
  </fieldset>
</form>

常用方法及注意事项

用其他方式替代默认的SUBMIT（此种方法可以解决编辑内容时，所有内容验证通过表单不提交的问题）
```
$("#registerForm").validate({
    submitHandler:function(form){
    	form.submit();
	}
});
```

也可以设置validate的默认值

$.validator.setDefaults({
    submitHandler: function (form) {
        form.submit();
	}
});

debug，如果这个参数为true，那么表单不会提交，只进行检查，调试时十分方便
```
$("#registerForm").validate({
    debug:true
});
```
或者
```
$.validator.setDefaults({
    debug: true
})
```
.ignore：忽略某些元素不验证（默认情况是忽略:hidden及隐藏的元素不进行验证）
```
$.validator.setDefaults({
    ignore: ".ignore"
})
```

errorPlacement：指定错误信息存放的位置

$("#registerForm").validate({
    errorPlacement: function (error, element) { //指定错误信息位置
        error.appendTo(element.parent().next());
        //将错误信息插入到父级元素的后面一个元素
    }
});

errorClass设置错误信息的class样式

$("#registerForm").validate({
    errorClass:"text-danger"
});

自定义扩展验证规则

	$.validator.addMethod("regexp", function (value, element, params) {
         var reg = new RegExp(params);
         return reg.test(value);
     });

扩展使用

更改表单中按钮的`submit`类型

在之前上面的使用的时候，我们表单当中的按钮必须是一个type="submit"，如果不是这个类型，则表单不会验证，这个时候很麻烦【后期如果不是这个按钮，而是一个图片或a标签呢，这个时候是不是就不能触发了呢】

<form id="registerForm">
    <!-- 这里省略了部分代码  -->
    <button type="button" id="btnReg">
        这是一个普通按钮
    </button>
</form>

这个时候我们就需要更一下我们的代码了

$(function () {
    //配置
    var result = $("#registerForm").validate({
        errorClass: "error-info"
    });
    //这里的result就是配置的返回值

    $("#btnReg").click(function(){
        if(result.form()){
            //表单验证通过
            //保存起来，插入到数据库或缓存
        }
        else{
            //表单验证不通过
        }
    })

});

代码分析：首先我们通过$("#registerForm").validate()这个方法去配置，然后得到一个配置结果，接下来在这个结果上面调用了result.form()的方法，这个方法就会去验证表单的规则，如果全部通过则返回true,如果没有通过则返回false,我们可以再根据这个返回值再去执行相应的操作

配置提示信息的位置

默认情况下，验证不能过后提示信息是在当前元素的后面的，我们可以通过配置插件的errorPlacement这个属性

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单验证插件</title>
    <style>
        .f1 {
            width: 900px;
            margin: auto;
        }

        .error-info {
            color: red;
            font-weight: bold;
        }
        #registerForm>div{
            border: 1px solid black;
            display: flex;
            padding: 5px 0;
        }
        #registerForm>div>span{
            width: 130px;
        }
        #registerForm>div>input{
            flex: 1;
        }
        #registerForm>div>.error-msg-box{
            width: 200px;
        }
    </style>
</head>

<body>
    <fieldset class="f1">
        <legend>注册信息</legend>
        <form id="registerForm">
            <div>
                <span>用户名称：</span>
                <input type="text" id="userName" name="userName" data-rule-required="true" data-msg-required="用户名不能为空">
                <div class="error-msg-box"></div>
            </div>
            <div>
                <span>用户密码：</span>
                <input type="text" id="userPwd" name="userPwd" data-rule-required="true" data-msg-required="密码不能空">
                <div class="error-msg-box"></div>
            </div>
            <div>
                <span>确认密码：</span>
                <input type="text" id="userSecondPwd" name=" userSecondPwd" data-rule-required="true"
                data-msg-required="确认密码不能为空" data-rule-equalTo="#userPwd" data-msg-equalTo="两次密码必须相同">
                <div class="error-msg-box"></div>
            </div>
            <div>
                <button type="button" id="btnReg">我要注册信息</button>
            </div>
        </form>
    </fieldset>
</body>
<script src="./js/jquery.js"></script>
<script src="./js/jquery.validate.js"></script>
<script src="./js/messages_zh.js"></script>
<script>
    
    $(function () {
        //配置
        var result = $("#registerForm").validate({
            errorClass: "error-info",
            errorPlacement:function(errorEle,currentEle){
                //currentEle代表当前验证的元素的jQuery操作对象,相当于$("选择器")
                currentEle.next(".error-msg-box").append(errorEle);
            }
        });
        
        $("#btnReg").click(function(){
            if(result.form()){
                //表单验证通过
            }
            else{
                //表单验证不通过
            }
        })
    }); 
</script>

</html>

单选与多选的验证

 <form id="form1">
     <div>
         <span>性别</span>
         <input type="radio" name="sex" value="男" data-rule-required="true" data-msg-required="性别必须选择">男
         <input type="radio" name="sex" value="女">女
     </div>
     <div>
         <span>爱好</span>
         <input type="checkbox" name="hobby" data-rule-required="true" data-msg-required="性别必须选择">看书
         <input type="checkbox" name="hobby">睡觉
         <input type="checkbox" name="hobby">玩游戏
         <input type="checkbox" name="hobby">打牌
         <input type="checkbox" name="hobby">聊天
     </div>
     <div>
         <button type="submit">提交表单</button>
     </div>
</form>
<script>
$(function(){
    $("#form1").validate({

    });
})
</script>

代码分析：对于单选或多选的，只用在第一个上面设置就可以了，因为它是以name为标准的，而在表单元素里面，name相同则代表是一组

目录CONTENT

jquery_validator使用

jQuery.validator插件使用

下载插件

使用规则

使用方式（两种）

常用方法及注意事项

扩展使用

更改表单中按钮的`submit`类型

配置提示信息的位置

单选与多选的验证

评论区

jquery_validator使用

jQuery.validator插件使用

下载插件

使用规则

使用方式（两种）

常用方法及注意事项

扩展使用

更改表单中按钮的submit类型

配置提示信息的位置

单选与多选的验证

评论区

更改表单中按钮的`submit`类型