jQuery validate 表单验证

不管是在窗口乱弹,广告乱飞,JavaScript被人滥用的Web 1.0,还是在背景色黄褪,异步JavaScript,JavaScript被人合理使用的Web2.0.
JavaScript一直都扮演着一个很重要的角色--表单 验证
表单验证也属于用户 体验的范畴,规范用户输入,减小不规范输入导致服务器 的压力,节省用户因输入错误导致的时间 浪费
表单验证写起来不难,但是多了的话还是很麻烦的.我这次就偷懒了,找了个jQuery的插件--jQuery-validate表单验证插件
下面的是一个评论表单的验证写法

1. $("#form").validate({
2. //验证规则
3. rules:{
4. author:{
5. required:true,//必须字段
6. minlength:2 //至少两字节
7. },
8. email:{
9. required:true,
10. email:true //此字段为邮件地址
11. },
12. url:{
13. required:false,
14. url:true //此字段为网址
15. },
16. content:{
17. required:true,
18. minlength:4
19. }
20. },
21. //错误消息
22. messages:{
23. author: {
24. required: '用户名必须填写',
25. minlength: jQuery.format("名称至少{0}两个字节吧")
26. },
27. email: {
28. required: '邮箱必须填写,做为联系方式',
29. email: '邮箱貌似不正确哦'
30. },
31. content: {
32. required: '网址必须填写',
33. minlength: jQuery.format("名称至少{0}两个字节吧")
34. }
35. },
36. submitHandler: function(form) {
37. //ajax提交表单,需要jQuery.Form插件
38. $(form).ajaxSubmit({
39. dataType:'json',
40. success:function(res){
41. if(res.success){
42. $('.ajaxsubmit').html ('发表成功!').addClass('ok');
43. $('textarea').val('');
44. $('#comments').prepend(res.msg);
45. }else
46. $('.ajaxsubmit').html(res.msg).addClass('fail');
47. }
48. });
49. return false;
50. },
51. errorPlacement:function(error, element) {
52. //放置错误提示消息的Element
53. error.appendTo(element.parent().find('b'));
54. },
55. errorClass:'fail',//错误消息样式
56. highlight: function(element, errorClass) {
57. //黄褪显示错误字段,需要jQuery.Highlight插件
58. $(element).highlightFade({color:'yellow',speed:1000,iterator:'exponential'})
59. }
60. });

复制代码

更多的参数配置可以看看官方的api文档
官方jQuery ValidateAPI文档
jQuery Validate作者博客及下载