jQuery Validation简单示例

来源：互联网发布：网络中的延时多少正常编辑：程序博客网时间：2024/05/22 17:45
以下是一个使用jQuery Validation进行数据有效性校验的一个简单示例。代码中有相关的说明。
Js代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
 <head>  
  <title> JQuery Validation Test </title>  
  <meta name="Generator" content="EditPlus">  
  <meta name="Author" content="">  
  <meta name="Keywords" content="">  
  <meta name="Description" content="">  
    
  <style type="text/css">  
    #allDiv {  
        text-align:left;  
        width:500px;  
        border:1px solid red;  
    }  
    label.error {  
        color: red;/*错误信息的颜色*/  
    }  
    input.error {  
        border:1px dotted red;/*输入错误的输入框的边框样式*/  
    }  
  </style>  
      
  <script type="text/javascript" src="jquery.js"></script>  
  <script type="text/javascript" src="jquery.validate.min.js"></script>  
  <script type="text/javascript">  
    $(function() {  
        //可以这样定义自己的验证方式,主要是利用JQuery Validation给我们提供的jQuery.validator.addMethod( String name, Function rule, String message ) 方法,  
        //第一个参数是自定义的认证的名称，第二个参数是处理方法，第三个参数是默认的信息  
        // 电话号码验证         
         jQuery.validator.addMethod("tel", function(value, element) {         
             var tel = /^\d{3,4}-?\d{7,8}$/;    //电话号码格式010-12345678     
             return this.optional(element) || (tel.test(value));         
         }, "the tel is not valid!");    
  
        $("#form1").validate({//参数是一个对象，这个一般的配置都是这样的  
            rules: {//rules里面的属性名都是输入框的name属性值  
                name: "required",//name表示某一输入框的name的属性值,换句话说就是用于验证的表单元素的name而不是id  
                username: "required",  
                password: {//有多个约束的时候就写成一个对象  
                    required: true,  
                    minlength: 6,  
                    maxlength:16  
                },  
                repassword: {  
                    equalTo: "#password"  
                },  
                email: {  
                    required: true,  
                    email: true  
                },  
                tel: {  
                    required: true,  
                    tel: true//这是上面自定义的验证方式  
                }  
                //约束还可以是：rangelength: [2, 6]，长度的范围  
                //min,max 最大值,最小值  
                //range: [13, 23] 取值范围  
                //url,是一个URL  
                //date,是一个日期  
                //dateISO,是一个ISO日期  
                //dateDE,德国日期  
                //decimal,是一个十进制的数  
                //digits,只能是数字  
                //creditcard,信用卡式的数字  
                //accept,表示哪些文件是被允许的，accept: "xls|csv"，只有xls和csv文件才能通过验证,默认是jpeg,gif,png式的图片文件  
                //对于复杂的验证方式可以向上面的验证电话号码的方法自定义验证方式，并使用正则表达式来实现  
            },  
            messages: {  
                name: "name is empty!",  
                username: "username is empty!",  
                password: {  
                    required: "password is empty!",  
                    minlength: "the minlength is 6 !",  
                    maxlength: "the maxlength is 16 !"  
                },  
                repassword: "the repassword is not equal to password!",  
                email: {  
                    required: "we need your email address! ",  
                    email: "your email is not valid!"  
                },  
                tel: {  
                    required: "tel is empty!",  
                    tel: "tel is not valid!"  
                }  
            }  
        });  
    });  
  </script>  
 </head>  
  
 <body>  
 <center>  
 <div id="allDiv">  
    <form id="form1">  
        name:<input type="text" name="name"><br>  
        username:<input type="text" name="username"><br>  
        password:<input type="password" name="password" id="password"><br>  
        repassword:<input type="password" name="repassword"><br>  
        email:<input type="text" name="email"><br>  
        tel:<input type="text" name="tel"><br>  
        <input type="submit" value="submit">  
    </form>  
 </div>  
 </center>  
 </body>  
</html>  
0 0