jquery validate ajax 验证重复的2种方法

转载自：http://blog.51yip.com/jsjquery/1484.html

jquery validate 经过这种多年的改良，已经很完善了。它能满足80%的验证需要，如果validate自带的功能，不能满足我们需求，它提供了addMethod来扩展功能。下面就举个小例子来说明一下addMethod的用法。先看一下：demo

简单说一下js代码，详细一点的看上面例子源码：

查看复制打印?

1. $(document).ready(function(){
2. jQuery.validator.addMethod("phonecheck", function(value, element) {   //添加一个phonecheck方法，来自定义check规则
3. string = value.match(/0(\d{2,2})-(\d{7,7})/ig);
4. if(string != null){
5. return true;
6. }else{
7. return false;
8. }
9. }, "telphone number like 021-1234567");
10. jQuery.validator.addMethod("phonesame", function(value, element) {    //用jquery ajax的方法验证电话是不是已存在
11. var flag = 1;
12. $.ajax({
13. type:"POST",
14. url:'tel.php',
15. async:false,                                             //同步方法，如果用异步的话，flag永远为1
16. data:{'tel':value},
17. success: function(msg){
18. if(msg == 'yes'){
19. flag = 0;
20. }
21. }
22. });
23. if(flag == 0){
24. return false;
25. }else{
26. return true;
27. }
28. }, "sorry number have been exist");
29. $("#myform").validate({
30. errorPlacement: function(error, element) {
31. error.insertAfter(element);
32. },
33. rules:{
34. username:{
35. required:true,
36. remote:{                         //自带远程验证存在的方法
37. url:"tel.php",
38. type:"post",
39. dataType:"html",
40. data:{
41. username:function(){return $("#username").val();}
42. },
43. dataFilter: function(data, type) {
44. if (data == "yes")
45. return true;
46. else
47. return false;
48. }
49. }
50. },
51. telphone:{
52. required:true,
53. rangelength:[11,11],
54. phonecheck:true,
55. phonesame:true
56. }
57. },
58. messages:{
59. telphone:{
60. required:"Please enter your phone",
61. rangelength:"phone must be 11 numbers"
62. },
63. username:{
64. required:"Please enter your username",
65. remote:"the username have been exist"
66. }
67. },
68. debug:true
69. })
70. });
71. </script>

在这里推荐大家使用jquery validate，用熟了，很方便。

转载请注明
作者:海底苍鹰
地址:http://blog.51yip.com/jsjquery/1483.html