使用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
---恢复内容结束---