jquery - validate的使用

说明：

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