使用Jquery Validate时校验失败，但提交成功的问题

　　在之前的项目中，我要对html页面进行校验，就从网上查到有个很方便的工具--Jquery Vaildate,自身带有校验提示，也可以自己进行设置。

下面是我写的代码，由于项目中有关于手机号码的校验，所以需要额外的进行添加。

　　接下来我对其中几个比较重要的地方做一下解释：

1.rules:是校验规则，可以自己进行设置，如果没有则自动默认为Jquery Validate默认提供的规则。

2.message:是提示信息，如果用户输入与规则不符，则会进行提示，提示信息可以自己设置也可以使用Jquery Validate默认提供的警示信息。

3.SubmitHandler:这是我的问题所在，因为Jquery Vaildate 默认的是from表单信息提交，而我在html里面使用的是onclick事件，进行ajax跨域提交，所以没有进行提交校验。

　　　　　　这里我请教经理做的模拟表单提交，具体看代码。

4.required：是非空提示，默认为true，需要在<input> 里面进行添加。

5.tips: 提示信息出现的位置是默认跟在文本框后面的，

6.提示信息的颜色可以在js自行进行设定

7.更加具体的应用可以参考网址：http://www.cnblogs.com/weiqt/articles/2013800.html

 1 // 手机号码验证
 2         jQuery.validator.addMethod("isMobile", function(value, element) {
 3             var length = value.length;
 4             var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;
 5             return this.optional(element) || (length == 11 && mobile.test(value));
 6         }, "请正确填写您的手机号码");
 7         $().ready(function() {
 8             $("#change").validate({
 9                 debug : false,
10                 success : function(label) {
11                     //label.text('').addClass('valid');
12                     label.removeClass('label');
13                     label.addClass('glyphicon  glyphicon-ok').css('color', '#666').text('');
14 
15                 },
16                 onfocusout : function(element) {
17                     this.element(element);
18                 },
19                 rules : {
20                     email : {
21                         required : true,
22                         email : true
23                     },
24                     cellphone : {
25                         required : true,
26                         minlength : 11,
27                         // 自定义方法：校验手机号在数据库中是否存在
28                         // checkPhoneExist : true,
29                         isMobile : true
30                     },
31                     change_count : {
32                         required : true,
33                         digits : true
34                     },
35                     pcountry_tabs:{
36                         required : true
37                     },
38                     change_type : {
39                         required : true
40                     }
41                     
42                 },
43                 submitHandler : function(form) {
44 
45                     if($('#pcountry_tabs').val()=="点击选择要查询的国家地区组织                                                                         ▼"){
46                         alert("请选择国家");
47                         return false;
48                     }else if($('#change_type').val()=="0"){
49                         alert("请选择变更类型");
50                         return false;
51                     }        
52                     $.ajax({
53                         url : app_url + '/api/savechange',
54                         dataType : 'jsonp',
55                         data : {
56                             "change_type" : $('#change_type').val(),
57                             "change_country" : $('#pcountry_tabs').val(),
58                             "change_count" : $('#change_count').val(),
59                             "email" : $('#email').val(),
60                             "cellphone" : $('#cellphone').val()
61                         },
62                         jsonp : 'callback',
63                         success : function(result) {
64                             alert(result.state);
65 
66                         }
67                     });
68                 },
69                 messages : {
70                     email : {
71                         required : "请输入您的邮箱",
72                         email : "请输入正确的邮箱"
73                     },
74                     cellphone : {
75                         required : "请输入手机号",
76                         minlength : "手机号不正确",
77                         isMobile : "手机号不正确"
78                     },
79                     change_count : {
80                         required : "请输入件数",
81                         digits : "请输入数字"
82                     },
83                     pcountry_tabs:{
84                         required : "请选择国家"
85                     },
86                     change_type : {
87                         required : "请选择变更类型"
88                     }
89                 }
90             });
91         });
92         function doSubmit() {
93             $("#change").submit();
94         }

2016-07-2913:40:50

---恢复内容结束---