JQueryQ Validate

发表于   |   分类于   |  

默认校验规则

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

默认提示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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}.")
}

修改默认提示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$.extend($.validator.messages, {
    required: "必选字段",
    remote: "请修正该字段",
    email: "请输入正确格式的电子邮件",
    url: "请输入合法的网址",
    date: "请输入合法的日期",
    dateISO: "请输入合法的日期 (ISO).",
    number: "请输入合法的数字",
    digits: "只能输入整数",
    creditcard: "请输入合法的信用卡号",
    equalTo: "请再次输入相同的值",
    accept: "请输入拥有合法后缀名的字符串",
    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} 的值")
});

自定义Method

[手机验证方法] []
1
2
3
4
5
// 匹配手机号码，或者座机
   jQuery.validator.addMethod("isInteger", function(value, element) {       
        return this.optional(element) || (/^(13|15|18)\d{9}$/i.test(value) 
	 || /^((\(\d{2,3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/i.test(value));     
   }, "格式不正确,请使用下面格式:020-88888888或手机号码.");

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":"
            + request.getServerPort() + path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <base href="<%=basePath%>">

        <title>jQuery Validate验证框架详解</title>

        <meta http-equiv="pragma" content="no-cache">
        <meta http-equiv="cache-control" content="no-cache">
        <meta http-equiv="expires" content="0">
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="This is my page">
        <script type="text/javascript" src="<%=request.getContextPath()%>/validate/jquery-1.6.2.min.js"></script>
        <script type="text/javascript" src="<%=request.getContextPath()%>/validate/jquery.validate.min.js"></script>
        <script type="text/javascript">
        $(function(){
            var validate = $("#myform").validate({
                debug: true, //调试模式取消submit的默认提交功能   
                //errorClass: "label.error", //默认为错误的样式类为：error   
                focusInvalid: false, //当为false时，验证无效时，没有焦点响应  
                onkeyup: false,   
                submitHandler: function(form){   //表单提交句柄,为一回调函数，带一个参数：form   
                    alert("提交表单");   
                    form.submit();   //提交表单   
                },   
                
                rules:{
                    myname:{
                        required:true
                    },
                    email:{
                        required:true,
                        email:true
                    },
                    password:{
                        required:true,
                        rangelength:[3,10]
                    },
                    confirm_password:{
                        equalTo:"#password"
                    }                    
                },
                messages:{
                    myname:{
                        required:"必填"
                    },
                    email:{
                        required:"必填",
                        email:"E-Mail格式不正确"
                    },
                    password:{
                        required: "不能为空",
                        rangelength: $.format("密码最小长度:{0}, 最大长度:{1}。")
                    },
                    confirm_password:{
                        equalTo:"两次密码输入不一致"
                    }                                    
                }
                          
            });    
    
        });
        </script>
    </head>

    <body>
        <form id="myform" method="post" action="">
            <p>
                <label for="myname">用户名：</label>
                <!-- id和name最好同时写上 -->
                <input id="myname" name="myname" />
            </p>
            <p>
                <label for="email">E-Mail：</label>
                <input id="email" name="email" />
            </p>
            <p>
                <label for="password">登陆密码：</label>
                <input id="password" name="password" type="password" />
            </p>
            <p>
                <label for="confirm_password">确认密码：</label>
                <input id="confirm_password" name="confirm_password" type="password" />
            </p>
            <p>
                <input class="submit" type="submit" value="立即注册" />
            </p>
        </form>
    </body>
</html>

Others

用其他方式替代默认的submit

1
2
3
4
5
6
7
8
$(function(){
   $("#signupForm").validate({
        submitHandler:function(form){
            alert("submit!");   
            form.submit();
        }    
   });
});

debug，只验证不提交表单

如果这个参数为true，那么表单不会提交，只进行检查，调试时十分方便

ignore

ignore：忽略某些元素不验证 ignore: ".ignore"

更改错误信息显示的位置

errorPlacement：Callback
Default: 把错误信息放在验证的元素后面 
指明错误放置的位置，默认情况是：error.appendTo(element.parent());即把错误信息放在验证的元素后面 

1
2
3
errorPlacement: function(error, element) { 
   	 error.appendTo(element.parent()); 
}

验证的触发方式修改

下面的虽然是boolean型的，但建议除非要改为false,否则别乱添加。
- onsubmit：Boolean Default: true 
提交时验证. 设置唯false就用其他方法去验证
- onfocusout：Boolean Default: true 
失去焦点是验证(不包括checkboxes/radio buttons)
- onkeyup：Boolean Default: true 
在keyup时验证.
- onclick：Boolean Default: true 
在checkboxes 和 radio 点击时验证
- focusInvalid：Boolean Default: true 
提交表单后，未通过验证的表单(第一个或提交之前获得焦点的未通过验证的表单)会获得焦点
- focusCleanup：Boolean Default: false 
如果是true那么当未通过验证的元素获得焦点时，移除错误提示。避免和focusInvalid一起用

异步验证

remote：URL
使用ajax方式进行验证，默认会提交当前验证的值到远程地址，如果需要提交其他的值，可以使用data选项    

1
2
3
4
5
6
7
8
9
10
remote: {
    url: "check-email.php",     //后台处理程序
    type: "post",               //数据发送方式
    dataType: "json",           //接受数据格式   
    data: {                     //要传递的数据
        username: function() {
            return $("#username").val();
        }
    }
}