注册表单常用验证方式
一、.net中有多种方法
1、引用<script src="Scripts/jquery.validate.js"></script>
<script src="Scripts/jquery.validate.unobtrusive.js"></script>
在需要验证的input标签上添加属性data-val="true"，即表示改标签参加验证。
继续在标签上添加属性data-val-required="用户名不能为空！"，表示此标签的内容不能为空的验证。
可参考：http://www.cnblogs.com/super-ln/p/unobtrusive.html
2、在每个表的Model层里面定义，也要引用js文件，在前端使用@Html.XX来显示表单，还要使用@Html.ValidationMessageFor(xx)显示错误信息，例如：
[Display(Name = "用户名")] [Required(ErrorMessage = "用户名不能为空")] [StringLength(10, MinimumLength = 2, ErrorMessage = "用户名{2}～{1}个字符")] [Remote("CheckLoginName", "User", ErrorMessage = "用户名已存在")] public string LoginName { get; set; }
二、php及其他语言中可使用通用方式
下载jquery.validate.js的相关脚本，引入到项目中。但里面没有验证手机号的方法，我们添加一个validate的扩展js，引入项目，代码如下：
// 判断整数value是否等于0 jQuery.validator.addMethod("isIntEqZero", function (value, element) { value = parseInt(value); return this.optional(element) || value == 0; }, "整数必须为0"); // 判断整数value是否大于0 jQuery.validator.addMethod("isIntGtZero", function (value, element) { value = parseInt(value); return this.optional(element) || value > 0; }, "整数必须大于0"); // 判断整数value是否大于或等于0 jQuery.validator.addMethod("isIntGteZero", function (value, element) { value = parseInt(value); return this.optional(element) || value >= 0; }, "整数必须大于或等于0"); // 判断整数value是否不等于0 jQuery.validator.addMethod("isIntNEqZero", function (value, element) { value = parseInt(value); return this.optional(element) || value != 0; }, "整数必须不等于0"); // 判断整数value是否小于0 jQuery.validator.addMethod("isIntLtZero", function (value, element) { value = parseInt(value); return this.optional(element) || value < 0; }, "整数必须小于0"); // 判断整数value是否小于或等于0 jQuery.validator.addMethod("isIntLteZero", function (value, element) { value = parseInt(value); return this.optional(element) || value <= 0; }, "整数必须小于或等于0"); // 判断浮点数value是否等于0 jQuery.validator.addMethod("isFloatEqZero", function (value, element) { value = parseFloat(value); return this.optional(element) || value == 0; }, "浮点数必须为0"); // 判断浮点数value是否大于0 jQuery.validator.addMethod("isFloatGtZero", function (value, element) { value = parseFloat(value); return this.optional(element) || value > 0; }, "浮点数必须大于0"); // 判断浮点数value是否大于或等于0 jQuery.validator.addMethod("isFloatGteZero", function (value, element) { value = parseFloat(value); return this.optional(element) || value >= 0; }, "浮点数必须大于或等于0"); // 判断浮点数value是否不等于0 jQuery.validator.addMethod("isFloatNEqZero", function (value, element) { value = parseFloat(value); return this.optional(element) || value != 0; }, "浮点数必须不等于0"); // 判断浮点数value是否小于0 jQuery.validator.addMethod("isFloatLtZero", function (value, element) { value = parseFloat(value); return this.optional(element) || value < 0; }, "浮点数必须小于0"); // 判断浮点数value是否小于或等于0 jQuery.validator.addMethod("isFloatLteZero", function (value, element) { value = parseFloat(value); return this.optional(element) || value <= 0; }, "浮点数必须小于或等于0"); // 判断浮点型 jQuery.validator.addMethod("isFloat", function (value, element) { return this.optional(element) || /^[-\+]?\d+(\.\d+)?$/.test(value); }, "只能包含数字、小数点等字符"); // 匹配integer jQuery.validator.addMethod("isInteger", function (value, element) { return this.optional(element) || (/^[-\+]?\d+$/.test(value) && parseInt(value) >= 0); }, "匹配integer"); // 判断数值类型，包括整数和浮点数 jQuery.validator.addMethod("isNumber", function (value, element) { return this.optional(element) || /^[-\+]?\d+$/.test(value) || /^[-\+]?\d+(\.\d+)?$/.test(value); }, "匹配数值类型，包括整数和浮点数"); // 只能输入[0-9]数字 jQuery.validator.addMethod("isDigits", function (value, element) { return this.optional(element) || /^\d+$/.test(value); }, "只能输入0-9数字"); // 判断中文字符 jQuery.validator.addMethod("isChinese", function (value, element) { return this.optional(element) || /^[\u0391-\uFFE5]+$/.test(value); }, "只能包含中文字符。"); // 判断英文字符 jQuery.validator.addMethod("isEnglish", function (value, element) { return this.optional(element) || /^[A-Za-z]+$/.test(value); }, "只能包含英文字符。"); // 手机号码验证 jQuery.validator.addMethod("isMobile", function (value, element) { var length = value.length; return this.optional(element) || (length == 11 && /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/.test(value)); }, "请正确填写您的手机号码。"); // 电话号码验证 jQuery.validator.addMethod("isPhone", function (value, element) { var tel = /^(\d{3,4}-?)?\d{7,9}$/g; return this.optional(element) || (tel.test(value)); }, "请正确填写您的电话号码。"); // 联系电话(手机/电话皆可)验证 jQuery.validator.addMethod("isTel", function (value, element) { var length = value.length; var mobile = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/; var tel = /^(\d{3,4}-?)?\d{7,9}$/g; return this.optional(element) || tel.test(value) || (length == 11 && mobile.test(value)); }, "请正确填写您的联系方式"); // 匹配qq jQuery.validator.addMethod("isQq", function (value, element) { return this.optional(element) || /^[1-9]\d{4,12}$/; }, "匹配QQ"); // 邮政编码验证 jQuery.validator.addMethod("isZipCode", function (value, element) { var zip = /^[0-9]{6}$/; return this.optional(element) || (zip.test(value)); }, "请正确填写您的邮政编码。"); // 匹配密码，以字母开头，长度在6-12之间，只能包含字符、数字和下划线。 jQuery.validator.addMethod("isPwd", function (value, element) { return this.optional(element) || /^[a-zA-Z]\\w{6,12}$/.test(value); }, "以字母开头，长度在6-12之间，只能包含字符、数字和下划线。"); // 身份证号码验证 jQuery.validator.addMethod("isIdCardNo", function (value, element) { //var idCard = /^(\d{6})()?(\d{4})(\d{2})(\d{2})(\d{3})(\w)$/; return this.optional(element) || isIdCardNo(value); }, "请输入正确的身份证号码。"); // IP地址验证 jQuery.validator.addMethod("ip", function (value, element) { return this.optional(element) || /^(([1-9]|([1-9]\d)|(1\d\d)|(2([0-4]\d|5[0-5])))\.)(([1-9]|([1-9]\d)|(1\d\d)|(2([0-4]\d|5[0-5])))\.){2}([1-9]|([1-9]\d)|(1\d\d)|(2([0-4]\d|5[0-5])))$/.test(value); }, "请填写正确的IP地址。"); // 字符验证，只能包含中文、英文、数字、下划线等字符。 jQuery.validator.addMethod("stringCheck", function (value, element) { return this.optional(element) || /^[a-zA-Z0-9\u4e00-\u9fa5-_]+$/.test(value); }, "只能包含中文、英文、数字、下划线等字符"); // 匹配english jQuery.validator.addMethod("isEnglish", function (value, element) { return this.optional(element) || /^[A-Za-z]+$/.test(value); }, "匹配english"); // 匹配汉字 jQuery.validator.addMethod("isChinese", function (value, element) { return this.optional(element) || /^[\u4e00-\u9fa5]+$/.test(value); }, "匹配汉字"); // 匹配中文(包括汉字和字符) jQuery.validator.addMethod("isChineseChar", function (value, element) { return this.optional(element) || /^[\u0391-\uFFE5]+$/.test(value); }, "匹配中文(包括汉字和字符) "); // 判断是否为合法字符(a-zA-Z0-9-_) jQuery.validator.addMethod("isRightfulString", function (value, element) { return this.optional(element) || /^[A-Za-z0-9_-]+$/.test(value); }, "判断是否为合法字符(a-zA-Z0-9-_)"); // 判断是否包含中英文特殊字符，除英文"-_"字符外 jQuery.validator.addMethod("isContainsSpecialChar", function (value, element) { var reg = RegExp(/[(\ )(\`)(\~)(\!)(\@)(\#)(\$)(\%)(\^)(\&)(\*)(\()(\))(\+)(\=)(\|)(\{)(\})(\')(\:)(\;)(\')(',)(\[)(\])(\.)(\<)(\>)(\/)(\?)(\~)(\！)(\@)(\#)(\￥)(\%)(\…)(\&)(\*)(\（)(\）)(\—)(\+)(\|)(\{)(\})(\【)(\】)(\‘)(\；)(\：)(\”)(\“)(\’)(\。)(\，)(\、)(\？)]+/); return this.optional(element) || !reg.test(value); }, "含有中英文特殊字符"); jQuery.extend(jQuery.validator.messages, { required: "必选字段", remote: "请修正该字段", email: "请输入正确格式的电子邮件", url: "请输入合法的网址", date: "请输入合法的日期", dateISO: "请输入合法的日期 (ISO).", number: "请输入合法的数字", digits: "只能输入整数", creditcard: "请输入合法的信用卡号", equalTo: "请再次输入相同的值", accept: "请输入拥有合法后缀名的字符串", maxlength: jQuery.validator.format("请输入一个 长度最多是 {0} 的字符串"), minlength: jQuery.validator.format("请输入一个 长度最少是 {0} 的字符串"), rangelength: jQuery.validator.format("请输入 一个长度介于 {0} 和 {1} 之间的字符串"), range: jQuery.validator.format("请输入一个介于 {0} 和 {1} 之间的值"), max: jQuery.validator.format("请输入一个最大为{0} 的值"), min: jQuery.validator.format("请输入一个最小为{0} 的值") });
表单验证验证的代码，如下：
几点说明：1)直接使用name属性为每个input添加验证
2)可以在里面直接自定义messages信息，不用本地化的
3)手机号的验证使用的是，扩展方法
4)远程验证，用户名是否存在，加入remote属性，填上地址，下面是.net的例子：
public ActionResult CheckUserName(string UserName) { bool res = UserName.Equals("admin"); //为false的时候 才会提示用户名已存在 return Json(!res,JsonRequestBehavior.AllowGet); }
$(function() { $("#form").validate({ rules: { UserName: { required: true, rangelength: [5, 12], remote:'@Url.Action("CheckUserName","Validate")' //这里使用远程验证用户名是否存在 }, Pwd: { required: true, minlength: 4 }, Pwd2: { required: true, minlength: 4, equalTo: "Pwd" }, Phone: { required:true, isMobile: true //这里使用validate_cn.js中的扩展方法 验证手机号 }, Email: { required:true, email:true } }, messages: { //可以使用validate的本地化 或者 直接在这里写提示信息 UserName: { required: "请输入用户名", rangelength: $.validator.format("用户名长度为{0}-{1}"), remote:"用户名已存在" }, Pwd2: { required: "请输入密码", equalTo: "两次输入密码不一致" } } }); });
三、使用validateform插件来做
官方地址http://validform.rjboy.cn/demo.html
