jquery.validate 表单验证
这个是我星期六的时候研究了一天的成果，虽然效率有点低吧，自学能力有点弱，不过自己还是很满意了吧，现在能自己套到程序中并成功运行，达到自己想要的效果
首先引用 Jquery Jquery.Vaildate
自定义方法，正则验证
jQuery.validator.addMethod("isPhone", function(value, element) { var length = value.length; var mobile = /^[1][345789]\d{9}$/; return this.optional(element) || (length == 11 && mobile.test(value)); }, "手机号码格式错误"); jQuery.validator.addMethod("IsVaildPersonCard", function(value, element) { var length = value.length; var personCard = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/; return this.optional(element) || (length == 15 || length == 18 && personCard.test(value)); }, "身份证格式错误"); jQuery.validator.addMethod("isLoginName", function(value, element) { var length = value.length; var loginname = /^[a-zA-Z]{1}[a-zA-Z0-9_]{5,15}$/; return this.optional(element) || (5 < length < 16 && loginname.test(value)); }, "登录名格式错误");
多重验证
jQuery.validator.addMethod("isLoginName", function (value, element) { var length = value.length; var mobile = /^[1][345789]\d{9}$/; var loginname = /^[a-zA-Z]{1}[a-zA-Z0-9_]{5,15}$/; var email = /^([\w-\.]+)@@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/; return this.optional(element)||(mobile.test(value))||(loginname.test(value))||(email.test(value)); }, "登录账号格式错误");
表单验证
//通过id查找要进行校验的表单 $("#regForm").validate({ //设置校验触发的时机,默认全是true。不要尝试去设置它为true，可能会有js错误。 //onsubmit:false, //onfocusout:true, //onkeyup:false, //onclick:false, //验证通过后执行的动作 //success:function(label){ // label.text("ok!").addClass("success"); //}, //手动设置错误信息的显示方式 errorPlacement: function(error, element) { //error.appendTo(element.parent().next()); error.appendTo(element.next()); $(".yanzheng .error").css("color", "#dc143c"); if (element.is("#VerifyCode")) { error.appendTo(element.next().next().next()); $(".yanzheng .error").css("color", "#dc143c"); } else if (element.is(":checkbox")) { error.appendTo(element.siblings("span")); } // else // error.appendTo( element.parent() ); }, rules: { LoginName: { required: true, rangelength: [6, 15], isLoginName: true, remote: { type: "post", url: "/Account/ValidateLoginName", data: { username: function() { return $("#LoginName").val(); } }, dataType: "html", dataFilter: function(data, type) { if (data == "True") { return true; } else { return false; } } } }, UserPassword: { required: true, minlength: 6 }, RePassword: { required: true, minlength: 6, equalTo: "#UserPassword" }, EmailAddress: { required: true, email: true, remote: { type: "post", url: "/Account/ValidateEmail", data: { username: function() { return $("#EmailAddress").val(); } }, dataType: "html", dataFilter: function(data, type) { if (data == "True") { return true; } else { return false; } } } }, MobilePhone: { required: true, digits: true, rangelength: [11, 11], isPhone: true, remote: { type: "post", url: "/Account/ValidatePhone", data: { username: function() { return $("#MobilePhone").val(); } }, dataType: "html", dataFilter: function(data, type) { if (data == "True") { return true; } else { return false; } } } }, IdCard: { required: true, IsVaildPersonCard: true, remote: { type: "post", url: "/Account/ValidateIdCard", data: { username: function() { return $("#IdCard").val(); } }, dataType: "html", dataFilter: function(data, type) { if (data == "True") { return true; } else { return false; } } } }, DriverLicense: { required: true }, VerifyCode: { required: true, rangelength: [5, 5], remote: { type: "post", url: "/Account/ValidateVerifyCodeSupplier", data: { username: function () { return $("#VerifyCode").val(); } }, dataType: "html", dataFilter: function (data, type) { if (data == "True") { return true; } else { return false; } } } }, reg_agreement: "required", }, //校验提示信息 messages: { LoginName: { required: "请输入用户名", rangelength: "长度必须为{0}到{1}个字符", isLoginName: "请输入合法的登录名", remote: "该用户名已存在" }, UserPassword: { required: "请输入密码", minlength: "密码至少是{0}个字符" }, RePassword: { required: "请输入确认密码", minlength: "确认密码至少是{0}个字符", equalTo: "确认密码与密码不相等" }, EmailAddress: { required: "请输入邮箱", email: "请输入正确的邮箱格式", remote: "该邮箱已注册" }, MobilePhone: { required: "请输入手机号", digits: "请输入正确的手机号", rangelength: "请输入正确的手机号", IsPhone: "请输入一个有效的联系电话", remote: "该手机号已注册" }, IdCard: { required: "请输入身份证号", remote: " 该身份证号已被注册" }, DriverLicense: { required: "请输入驾驶证号", IsVaildPersonCard: "请输入合法的身份证号" }, VerifyCode: { required:"请输入验证码", rangelength: "请输入正确的验证码", remote:"输入验证码有误" }, reg_agreement: "您没有同意使用协议", } });
后台异步验证
remote: { type: "post", url: "/Account/ValidateVerifyCodeSupplier", data: { username: function () { return $("#VerifyCode").val(); } }, dataType: "html", dataFilter: function (data, type) { if (data == "True") { return true; } else { return false; } } }
多重验证
jQuery.validator.addMethod("isLoginName", function(value, element) { var length = value.length; var mobile = /^[1][345789]\d{9}$/; var loginname = /^[a-zA-Z]{1}[a-zA-Z0-9_]{5,15}$/; var email = /^([\w-\.]+)@@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/; var idCard = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/; return this.optional(element) || (mobile.test(value)) || (loginname.test(value)) || (email.test(value)||(idCard.test(value))); }, "登录账号格式错误");
