jquery.validate使用说明及注意事项

jquery.validate.js  官方网站:http://bassistance.de/  http://jqueryvalidation.org/

一、默认验证规则

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-提示信息 这样的格式来重新定义,更简单,更直观,更强大了。




 


2.将校验规则写到代码中

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




 


四、常用方法及注意事项

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

$("#registerForm").validate({
    submitHandler:function(form){
    form.submit();
}
});

也可以设置validate的默认值

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

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

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

或者

$.validator.setDefaults({
    debug: true
})

3.ignore:忽略某些元素不验证(默认情况是忽略:hidden及隐藏的元素不进行验证)

$.validator.setDefaults({
    ignore: ".ignore"
})

4.errorPlacement:指定错误信息存放的位置

有一组复选框或单选框的情况,将错误信息的位置,存放在一组元素最后,如下:

$("#registerForm").validate({
    errorPlacement: function (error, element) { //指定错误信息位置
        if (element.is(':radio') || element.is(':checkbox')) { //如果是radio或checkbox
            var eid = element.attr('name'); //获取元素的name属性
            error.appendTo(element.parent()); //将错误信息添加当前元素的父结点后面
        } else {
            error.insertAfter(element);
        }
    }
});

原文:jquery.validate使用说明及注意事项

你可能感兴趣的:(JQuery)