zoukankan      html  css  js  c++  java
  • jQuery的validate验证插件使用方法

    (1)默认校验规则
    (1)required:true 必输字段
    (2)remote:"check.php" 使用ajax方法调用check.php验证输入值
    (3)email:true 必须输入正确格式的电子邮件
    (4)url:true 必须输入正确格式的网址
    (5)date:true 必须输入正确格式的日期
    (6)dateISO:true 必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22 只验证格式,不验证有效性
    (7)number:true 必须输入合法的数字(负数,小数)
    (8)digits:true 必须输入整数
    (9)creditcard: 必须输入合法的信用卡号
    (10)equalTo:"#field" 输入值必须和#field相同
    (11)accept: 输入拥有合法后缀名的字符串(上传文件的后缀)
    (12)maxlength:5 输入长度最多是5的字符串(汉字算一个字符)
    (13)minlength:10 输入长度最小是10的字符串(汉字算一个字符)
    (14)rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)
    (15)range:[5,10] 输入值必须介于 5 和 10 之间
    (16)max:5 输入值不能大于5
    (17)min:10 输入值不能小于10

    (2)默认的提示
    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).",
    dateDE: "Bitte geben Sie ein g眉ltiges Datum ein.",
    number: "Please enter a valid number.",
    numberDE: "Bitte geben Sie eine Nummer ein.",
    digits: "Please enter only digits",
    creditcard: "Please enter a valid credit card number.",
    equalTo: "Please enter the same value again.",
    accept: "Please enter a value with a valid extension.",
    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}.")
    },

    (3)

    自定义校验规则:

       $(document).ready(function(){  
              
            $("#empForm").validate({  
                //验证规则  
                rules:{   
                    realname:"required",  
                    username:{  
                        required:true,  
                        rangelength:[5,8]  
                    },  
                    psw:{  
                        required:true,  
                        rangelength:[6,12]  
                    },  
                    psw2:{  
                        required:true,  
                        equalTo:"#psw"  
                    },  
                    gender:{  
                        required:true  
                    },  
                    age:{  
                        digits:true,  
                        range:[10,15]  
                    },  
                    edu:{  
                        required:true  
                    },  
                    birthday:{  
                        required:true,  
                        date:true  
                    },  
                    checkbox1:{  
                        required:true  
                    },  
                    email:{  
                        email:true  
                    },  
                    cart:{  
                        cardCheck:"2"  
                    }  
                },  
                  
                //提示信息  
                messages:{  
                    realname:"真实姓名不能为空",  
                    username:{  
                        required:"登录名不能为空",  
                        rangelength:"登录名长度为5到8之间"  
                    },  
                    psw:{  
                        required:"密码不能为空",  
                        rangelength:"密码长度为6到12之间"  
                    },  
                    psw2:{  
                        required:"确认密码不能为空",  
                        equalTo:"两次密码输入不一致"  
                    },  
                    gender:{  
                        required:"请选择性别"  
                    },  
                    age:{  
                        digits:"输入的必须是数字",  
                        range:"年龄必须在10-15之间"  
                    },  
                    edu:{  
                        required:"学历必须选择一项"  
                    },  
                    birthday:{  
                        required:"生日必须填写",  
                        date:"日期格式为1900/01/01"  
                    },  
                    checkbox1:{  
                        required:"兴趣爱好必须选"  
                    },  
                    email:{  
                        email:"邮箱格式不正确"  
                    }  
                },  
                  
                //验证成功后进行的操作  
                success: function(label) {  
                    label.html(" ").addClass("right");//引号里的是& nbsp;  
                }  
                  
                  
            });  
        });  
            //自定义校验规则  
            /* 
             * addMethod: 
             *      第一个参数是:验证方法的名称,会在rules和messages中用到 
             *      第二个参数是:回调方法 
             *                  第一个参数value:组件中的值 
             *                  第二个参数element:组件对象 
             *                  第三个参数:表示错误提示信息,如果messages中也写了错误提示信息,那么会覆盖掉这个信息 
             */  
            $.validator.addMethod("cardCheck",function(value,element,params){  
    //          alert("value--->"+value);  是文本框输入的值  
    //          alert("element--->"+element);  组件对象  
    //          alert("params--->"+params);   默认值2  在rules中  cart:{cardCheck:"2"}  
                if(value!=null){  
                    if(value.length>=15&&value.length<=18)  
                        return true;  
                }else{  
                    return false;  
                }  
            },"错误提示信息");  

    验证成功后的样式:

    /* 验证成功后的样式 */  
        label.right{margin-left:4px; padding-left:20px; background:url(checked.gif) no-repeat 2px 0;vertical-align: middle;}  
    <html>  
        <head>  
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
            <title>jQuery validation plug-in - main demo</title>  
            <link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" />  
            <script type="text/javascript" src="js/jquery-1.4.2.js"></script>  
            <script type="text/javascript" src="js/jquery.validate.js"></script>  
              
    <script type="text/javascript">  
        //这里添加  
    </script>  
      
    </head>  
    <body>  
        <p>员工信息录入</p>  
    <form name="empForm" id="empForm" method="post" action="test.html">  
            <table border=1>  
                <tr>  
                    <td>真实姓名(不能为空 ,没有其他要求)</td>  
                    <td><input type="text" id="realname" name="realname" />  
                    </td>  
                </tr>  
                <tr>  
                    <td>登录名(登录名不能为空,长度应该在5-8之间,可以包含中文字符(一个汉字算一个字符)):</td>  
                    <td><input type="text" id="username" name="username" /></td>  
                </tr>  
                 <tr>   
                  <td>密码(不能为空,长度6-12字符或数字,不能包含中文字符):</td>  
                  <td><input type="password" id="psw"  name="psw" style="120px" /></td>  
                </tr  
                <tr>   
                  <td>重复密码密码(不能为空,长度6-12字符或数字,不能包含中文字符):</td>  
                  <td><input type="password" id="psw2" name="psw2" style="120px" /></td>  
                </tr>  
              
              
                <!--  
                    label style="display: none" for="gender" class="error"您的性别必须选择一个label  
                      * label:是jquery中显示错误信息的标签  
                      * class="error"属性表示存放错误信息的  
                      * for属性表示该标签的唯一标识,jquery验证框架运行时,先以for="gender"为条件查找lable标签  
                           * 如果找到,直接使用  
                           * 如果没有找到,创建一个新的标签  
                                label style="display: none" for="gender" class="error"  
                                  
                    底层代码  
                          errorClass: "error",  
                          errorElement: "label",  
                            
                            
                    label = $("<" + this.settings.errorElement + "/>")   ----$("<label/>")  
                        .attr({"for":  this.idOrName(element), generated: true})  
                        .addClass(this.settings.errorClass)  
                        .text(message || "");  
                          
                    label=<label for="name属性的值" class="error"  >xxxxx</label>             
                -->  
                  
                  
                <tr>  
                    <td>性别(必选其一)</td>  
                    <td>  
                        <input  type="radio" id="gender_male" value="m" name="gender"/>男  
                        <input  type="radio" id="gender_female" value="f" name="gender"/>女  
                        <!-- 写这个标签是为了防止默认将提示信息紧挨着'男'显示 -->  
                        <label style="display: none" for="gender"  class="error">您的性别必须选择一个</label>  
                    </td>  
                      
                </tr>  
                <tr>  
                    <td>年龄(必填26-50):</td>  
                    <td><input type="text" id="age" name="age" /></td>  
                </tr>  
                  
                <tr>   
                  <td>你的学历:</td>  
                  <td> <select name="edu" id="edu">  
                          <option value="">--请选择你的学历--</option>  
                          <option value="a">专科</option>  
                          <option value="b">本科</option>  
                          <option value="c">研究生</option>  
                          <option value="e">硕士</option>  
                          <option value="d">博士</option>  
                      </select>  
                  </td>  
                </tr>  
                  
                <tr>   
                  <td>出生日期(1982/09/21):</td>  
                   <td><input type="text" id="birthday"  name="birthday" style="120px" value="" /></td>  
                </tr>  
                  
               <tr>   
                  <td>兴趣爱好:</td>  
                  <td colspan="2">   
                      <input type="checkbox" name="checkbox1" id="qq1"/>乒乓球   
                      <input type="checkbox" name="checkbox1" id="qq2" value="1" />羽毛球   
                      <input type="checkbox" name="checkbox1" id="qq3" value="2" />上网   
                      <input type="checkbox" name="checkbox1" id="qq4" value="3" />旅游   
                      <input type="checkbox" name="checkbox1" id="qq5" value="4" />购物   
                      <!-- 写这个标签是为了防止默认将提示信息紧挨着'乒乓球'显示 -->  
                      <label  style="display: none" for="checkbox1" class="error">您的兴趣爱好,至少选择一个</label>  
                  </td>  
                </tr>  
                 <tr>   
                      <td align="left">电子邮箱:</td>  
                      <td><input type="text" id="email" style="120px" name="email" /></td>  
                 </tr>  
                  <tr>   
                      <td align="left">身份证(15-18):</td>  
                      <td><input type="text" id="cart"  style="120px" name="cart" /></td>  
                  </tr>  
                <tr>  
                    <td></td>  
                    <td></td>  
                    <td><input type="submit"  name="firstname"  id="firstname" value="保存"></td>  
                </tr>  
            </table>  
      
    </form>  
    </body>  
    </html>  

    注意事项:

    1.导入validate.js文件

    注意:

    *validate.js必须在jQuery.js文件之后导入,因为验证框架里需要用到jQuery.js中定义的方法

    *如果先导入jQuery.js再导入validate.js   再次导入jQuery.js也不行。因为验证框架里会将某些方法进行扩展,而后又一次导入jQuery.js会将扩展的方法覆盖。

    2.指定要验证的组件

    注意:

    *将验证的代码写在$(document).ready(function(){.....})或$(function(){.....})的function中,因为必须等到所有的DOM结构绘制完毕后才能执行,否则会报错,找不到元素。

    3.在要被验证的组件上加class属性

    注意:

    使用class="{}"的方式,必须引入包:jquery.metadata.js可以使用如下的方法,修改提示内容:
    class="{required:true,minlength:5,messages:{required:'请输入内容'}}"在使用equalTo关键字时,后面的内容必须加上引号,如下代码:
    class="{required:true,minlength:5,equalTo:'#password'}"

    *在组件上加class属性有两种方式:

    1.class="required email"  多种规则用空格分隔

    2.class="{required:true,email:true}"   json格式

    当然也可以混用class="{required:true} email"

    进行单独的提示消息覆盖:

    [javascript] view plaincopyprint?
    姓名<input type="text" name="userName" class="{required:true,minlength:3,messages:{required:'姓名必填',minlength:'不能少于3个字'}}">  
    [javascript] view plaincopyprint?
    <script type="text/javascript">  
        //自定义验证提示消息  
        jQuery.extend(jQuery.validator.messages, {  
            required: "请填写本字段",  
            remote: "验证失败",  
            email: "请输入正确的电子邮件",  
            url: "请输入正确的网址",  
            date: "请输入正确的日期",  
            dateISO: "请输入正确的日期 (ISO).",  
            number: "请输入正确的数字",  
            digits: "请输入正确的整数",  
            creditcard: "请输入正确的信用卡号",  
            equalTo: "请再次输入相同的值",  
            accept: "请输入指定的后缀名的字符串",  
            maxlength: jQuery.validator.format("允许的最大长度为 {0} 个字符"),  
            minlength: jQuery.validator.format("允许的最小长度为 {0} 个字符"),  
            rangelength: jQuery.validator.format("允许的长度为{0}和{1}之间"),  
            range: jQuery.validator.format("请输入介于 {0} 和 {1} 之间的值"),  
            max: jQuery.validator.format("请输入一个最大为 {0} 的值"),  
            min: jQuery.validator.format("请输入一个最小为 {0} 的值")  
        });  
        $(document).ready(function(){  
            $("form").validate();  
        });  
    </script>  
    
    
    [javascript] view plaincopyprint?
     
    <style type="text/css">  
        /* class=error的label组件  */  
        label.error{  
            margin-left: 10px;  
            color: red;  
        }  
    </style>  
  • 相关阅读:
    解释机器学习模型的一些方法(一)——数据可视化
    机器学习模型解释工具-Lime
    Hive SQL 语法学习与实践
    LeetCode 198. 打家劫舍(House Robber)LeetCode 213. 打家劫舍 II(House Robber II)
    LeetCode 148. 排序链表(Sort List)
    LeetCode 18. 四数之和(4Sum)
    LeetCode 12. 整数转罗马数字(Integer to Roman)
    LeetCode 31. 下一个排列(Next Permutation)
    LeetCode 168. Excel表列名称(Excel Sheet Column Title)
    论FPGA建模,与面向对象编程的相似性
  • 原文地址:https://www.cnblogs.com/abc8023/p/3836173.html
Copyright © 2011-2022 走看看