使用Jquery Validate时校验失败,但提交成功的问题
转自http://www.cnblogs.com/zixiaopiaomiao/p/5718089.html
在之前的项目中,我要对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
$("#sendform").bind("click", function () { // 手机号码验证 jQuery.validator.addMethod("isMobile", function (value, element) { var length = value.length; var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/; return this.optional(element) || (length == 11 && mobile.test(value)); }, "请正确填写您的手机号码"); var icon = "<i class='fa fa-times-circle'></i> "; $("#userform").validate({ rules: { UserCode: "required", Pwd: { required: true, minlength: 5 }, rpwd: { required: true, minlength: 5, equalTo: "#Pwd" }, RoleId: { required: true, }, RealName: "required", Tel: { required: true, isMobile: true } }, submitHandler: function (form) { var formdata = $("form").serialize(); formdata += "&id=" + id + ""; $.post(ajaxurl + "?fun=" + fun + "", formdata, function (data) { if (data != "") { if (data == 1) { parent.$('#layerval').val("1");//判断提交 取消标识 var index = parent.layer.getFrameIndex(window.name); parent.layer.close(index); } else { layer.alert(data); } } else { layer.alert("服务器连接失败!请联系管理员!"); } }); }, messages: { UserCode: { required: icon + "请输入您的用户名", minlength: icon + "用户名必须两个字符以上" }, Pwd: { required: icon + "请输入您的密码", minlength: icon + "密码必须5个字符以上" }, rpwd: { required: icon + "请再次输入密码", minlength: icon + "密码必须5个字符以上", equalTo: icon + "两次输入的密码不一致" }, RoleId: icon + "请选择用户角色", RealName: icon + "请输入真实姓名", Tel: { required: icon + "请输入用户电话", isMobile: "请正确填写您的手机号码" } } }) })