目 录CONTENT

文章目录

jquery_validator使用

Administrator
2020-07-24 / 0 评论 / 0 点赞 / 13121 阅读 / 16328 字 / 正在检测是否收录...

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} 的数值")
},

使用方式(两种)

  1. 将校验规则写到控件中

    看了之前的别人写的文章,貌似是依赖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>
    
  2. 将校验规则写到代码中

    个人感觉第一种写法,更适合做软件开发或是网站后台,而第二种写法更适合做网站的前台,对页面加载速度有苛刻的要求的时候,可以把脚本代码封装成一个单独的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>
    

常用方法及注意事项

  1. 用其他方式替代默认的SUBMIT(此种方法可以解决编辑内容时,所有内容验证通过表单不提交的问题)

    $("#registerForm").validate({
        submitHandler:function(form){
        	form.submit();
    	}
    });
    
  2. 也可以设置validate的默认值

    $.validator.setDefaults({
        submitHandler: function (form) {
            form.submit();
    	}
    });
    
  3. debug,如果这个参数为true,那么表单不会提交,只进行检查,调试时十分方便

    $("#registerForm").validate({
        debug:true
    });
    

    或者

    $.validator.setDefaults({
        debug: true
    })
    
  4. .ignore:忽略某些元素不验证(默认情况是忽略:hidden及隐藏的元素不进行验证)

    $.validator.setDefaults({
        ignore: ".ignore"
    })
    
  5. errorPlacement:指定错误信息存放的位置

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

    $("#registerForm").validate({
        errorClass:"text-danger"
    });
    
  7. 自定义扩展验证规则

    	$.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相同则代表是一组

0

评论区