内容发布更新时间 : 2025/1/26 5:56:04星期一 下面是文章的全部内容请认真阅读。
模型:
$(\).validate({ ignore:\, rules:{
zhName:{remote:{
url:\, method:\, dataType:\, data:{
name:function(){
return$('#zhName').val(); },
id:function(){
return$('#classIdForSub').val();
} } } } },
messages: {
zhName:{remote:\名称已存在\,required:\中文名称不能为空\,maxlength:\中文名称长度不能大于50\},
zhDescription:{required:\中文描述信息不能为空\,maxlength:\中文 描述长度不能超过500\},
enName:{required:\英文名称不能为空\,maxlength:\英文名称长度不能大于50\},
enDescription:{required:\英文描述信息不能为空\,maxlength:\英文描述长度不能超过500\} },
submitHandler:function(form){ form.submit(); },
errorPlacement:function(error, element) { error.appendTo($(\)); } });
页面上的是:
说明:
remote对应的是异步交互(验证用户名时候存在),required对应这页面的上的class=“required”,maxlength对应这个页面上的maxlength属性。 submitHandler是验证成功后执行的函数。 errorPlacement验证失败之后要执行的函数。
自定义校验规则:
jQuery.validator.addMethod(\,function(value, element){ //扩展方法示例:
varexp =newRegExp(/^\\w+$/);
returnexp.test(value); //value 被验证的input传入的值
},\登录名只支持数字、字母、下划线\);
#定义validate错误显示位置的模式
errorPlacement:function(error, element) { if($(element).is('select')){
error.appendTo( element.parent().children(\).empty().append(error)); }
error.appendTo( element.next(\).append(error)); },
1. 2. 3. 4. 5. 6.
//validate 选项
*********************************************************** $(\).validate({
debug:true //进行调试模式(表单不提交) rules:{
name:\, //自定义规则,key:value的形式,key是要验证的元素,value可以是字符串或对象
email:{
//内置验证方式
required:true, //必填项
required:\表达式的值为真,则必填项
required:function(){}返回为真,则必填项 email:true, //验证电子邮箱格式 minlength:5, //设置最小长度 maxlength:10, //设置最大长度
rangelength:[5,10],//设置一个长度范围[min,max]
7. 8. 9. 10. 11. 12. 13. 14. 15.
16. min:2, //设置最小值
17. 18. 19. 20.
max:8, //设置最大值
range:[2,8] //设置值的范围 url:true, //验证URL格式 date:true, //验证日期格式(类似30/30/2008的格式,不验证日期准确性只验证格式)
21. dateISO:true, //验证ISO类型的日期格式 例如:
2009-06-23
22. dateDE:true, //验证德式的日期格式
(29.04.1994 or 1.1.2006)
23. number:true, //验证十进制数字(包括小数的) 24. digits:true, //验证整数
25. creditcard:true, //验证信用卡号
26. accept:\ //请输入拥有合法后缀名的字符串
(上传文件的后缀)
27. equalTo:\名\ //验证两个输入框的内容是否相
同
28. phoneUS:true //验证美式的电话号码
29. regex:/正则表达式/ //上面addMethod扩展
的验证规则
30. 31. 32. 33. 34.
} }
messages:{
name:\不能为空\, //自定义的提示信息key:value的形式key是要验证的元素,值是字符串或函数
35. email:{
36. required:\不能为空\,
37. email:\地址不正确\ //validate 内置验
证有默认的英语提示 此处为重新自定义
38. 39. 40. 41. 42.
} }
errorPlacement: function(error,element) {
element.parents('.form-group').children(\lp-block\).html(error); //错误显示的位置 element验证的元素error错误提示
43. } 44.
45. submitHandler:function(form) {//通过验证后运行的函
数,里面要加上表单提交的函数,否则表单不会提交
46. 47. 48. 49.
$(form).ajaxSubmit(); //form.submit(); }
50. success:\类名\ //要验证的元素通过验证后的动作,跟一个
字符串,会给输出错误的元素追加一个css类 ,后面也可以跟一个functiontion做处理
51. 52. 53. 54. 55.
ignore:\ //对某些元素不进行验证
onsubmit:false //是否提交时验证 默认:true
onfocusout:false //是否在获取焦点时验证 默认:true onkeyup:false //是否在敲击键盘时验证 默认:true onclick:false //是否在鼠标点击时验证(一般验证checkbox,radiobox) 默认:true
56. focusInvalid:false //提交表单后,未通过验证的表单(第一
个或提交之前获得焦点的未通过验证的表单)会获得焦点 默认:true
57. focusCleanup:true //当未通过验证的元素获得焦点时,并
移除错误提示(避免和 focusInvalid.一起使用)默认:false
58. errorClass:\类名\ //指定错误提示的css类名,可以自定义
错误提示的样式 默认:\
59. errorElement:\标签\ //使用什么标签标记错误 默
认:\
60. wrapper:\标签\ //使用什么标签再把上边的
errorELement包起来
61. errorLabelContainer:\容器id\ //把错误信息统一放在
一个容器里面
把错误信息统一放在一个容器里面。 wrapper:String
用什么标签再把上边的errorELement包起来 一般这三个属性同时使用,实现在一个容器内显示所有错误提示的功能,并且没有信息时自动隐藏
errorContainer: \
errorLabelContainer: $(\wrapper: \
1. showErrors:function(errorMap,errorList) { //跟一
个函数,可以显示总共有多少个未通过验证的元素
2. $(\).html(\ + t
his.numberOfInvalids() + \);
3. 4. 5. 6. 7. 8.
this.defaultShowErrors(); } })
//validate方法 返回一个Validator对象,它有很多方法, 让你能使用引发校验程序或者改变form的内容**************
9.
10. $.validator.setDefaults({//设置validator默认
11. debug:true, //把调试模式设置为默认 如果一个页面中有多
个表单一般用这种方式
12. errorClass: \, //设置默认错误提示的css类
名
13. 14. 15. 16.
errorElement: \ //设置默认错误提示的标签 })
//addMethod(name,method,message)方法:name(自定义rules的key) method(自定义验证方法) message(报错输出的提示)
17. jQuery.validator.addMethod(\,function(value, e
lement, params){ //扩展方法示例:
18. var exp = new RegExp(params); //params rules的
value传入的正则表达式
19. return exp.test(value); //value 被验证的
input传入的值
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.
},\输入格式有误\);
//扩展rules规则
jQuery.validator.addClassRules(\, { required: true, minlength: 2 });
jQuery.validator.addClassRules({ name: {
required: true, minlength: 2 },
zip: {
required: true, digits: true, } });
$(\).rules(\, { required: true, minlength: 2, messages: {
required: \,
minlength: jQuery.format(\0} characters are necessary\)
} });
$(\).rules(\); //全部移除验证规则 $(\).rules(\, \) //移除 min max