现在在网络上已经可以找到很多基于bootstarp的表单认证，但是验证的都不全面的，下载后，我们还要理解作者的思路然后进行修改添加，这种修改方式往往适合学习，时间很多的时候。但是我们很多时候是没有时间去慢慢理解和修改。所以我们还是老实点，用validate来做bootstarp表单认证吧，我这里用的是取巧的方式，正常使用的判断状态应该是用bootstarp提供的表单状态类如has-error。等有时间的时候我们再来修改下。现在就先用下面的方法。
1：首先我们去下载 jQuery Validate插件
2：在页面中引入jQuery Validate库
<script src="bootstrap/jquery/jquery-1.11.1.min.js"> 之前要先引入Jq库
<script type="text/javascript" src="form/jquery.validate.js"></script>
3：重置下提示信息，默认的提示信息为英文。
<script src="form/resetform.js" type="text/javascript"></script>
==============================内容start========================
jQuery.extend(jQuery.validator.messages, { required: "必选字段", remote: "请修正该字段", email: "请输入正确格式的电子邮件", url: "请输入合法的网址", date: "请输入合法的日期 xxxx/xx/xx", 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} 的值")}); ==============================内容end========================
4:需要判断的正则
<script src="form/form.js" type="text/javascript"></script>
==============================内容start========================
$(function () {/*** register form validate*///check namesvar errorMessage = "为字符类型";var errorMessage2="请输入正确的身份证";var errorMessage3="手机号码格式错误";var errorMessage4="只能输入中文";var errorMessage5="电话号码格式错误"; 下面的几个是自定义判断，就解析一个例子，其他差不多。jQuery.validator.addMethod("isString", function(value, element) { var isString = /^[a-zA-Z][a-zA-Z_]*$/; 红色的放正则，这条正则：是否为字符串 return this.optional(element) || (isString.test(value)); 绿色的名字要一致，后面用该名字运用该规则}, errorMessage);jQuery.validator.addMethod("isID", function(value, element) { var isID = /^[1-9]([0-9]{14}|[0-9]{17})$/; return this.optional(element) || (isID.test(value));}, errorMessage2); jQuery.validator.addMethod("mobile", function(value, element) { var length = value.length; var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/ return this.optional(element) || (length == 11 && mobile.test(value)); }, errorMessage3); jQuery.validator.addMethod("chinese", function(value, element) { var chinese = /^[\u4e00-\u9fa5]+$/; return this.optional(element) || (chinese.test(value)); }, errorMessage4); jQuery.validator.addMethod("phone", function(value, element) { var length = value.length; var phone = /^((\d{11})|^((\d{7,8})|(\d{4}|\d{3})-(\d{7,8})|(\d{4}|\d{3})-(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1})|(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1}))$)$/ return this.optional(element) || (phone.test(value)); }, errorMessage5); jQuery.validator.addMethod("isIdCardNo", function (value, element) { return this.optional(element) || isIdCardNo(value); }, "请正确输入您的身份证号码");$('#sign_form').validate({ 表单form的IderrorElement : 'span',rules : { 下面的是判断规则，这里解析一条，有的人喜欢把它们放在html内联，但个人喜欢提取出来统一放置。realname: { 需要判断的input namerequired: true, 是否为必填isString: true, 是否为字符串chinese: true, 是否为中文minlength: 3 最小长度为3},conplay: {required: true,isString: true,minlength: 3},password: {required: true,minlength: 6},confirm_password: {required: true,equalTo:"#password" 输入的值是否和#password值一致},mobile: { required: true, mobile: true },phone: { required: true, phone: true },position: { required: true,isString: true,chinese: true },email: { required: true, email: true }, dateISO: { dateISO: true },uid: {required: true,isIdCardNo: true}}});});//增加身份证验证函数function isIdCardNo(num) { var factorArr = new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2, 1); var parityBit = new Array("1", "0", "X", "9", "8", "7", "6", "5", "4", "3", "2"); var varArray = new Array(); var intValue; var lngProduct = 0; var intCheckDigit; var intStrLen = num.length; var idNumber = num; // initialize if ((intStrLen != 15) && (intStrLen != 18)) { return false; } // check and set value for (i = 0; i < intStrLen; i++) { varArray[i] = idNumber.charAt(i); if ((varArray[i] < '0' || varArray[i] > '9') && (i != 17)) { return false; } else if (i < 17) { varArray[i] = varArray[i] * factorArr[i]; } } if (intStrLen == 18) { //check date var date8 = idNumber.substring(6, 14); if (isDate8(date8) == false) { return false; } // calculate the sum of the products for (i = 0; i < 17; i++) { lngProduct = lngProduct + varArray[i]; } // calculate the check digit intCheckDigit = parityBit[lngProduct % 11]; // check last digit if (varArray[17] != intCheckDigit) { return false; } } else { //length is 15 //check date var date6 = idNumber.substring(6, 12); if (isDate6(date6) == false) { return false; } } return true;} ==============================内容end========================
5：基于bootstarp写的html
6:修改下样式 。
/*表单重置*/
.error{border-color: #F16951;color: #bf432e;}.valid{border-color: #5CB85C;}.required_span{color: #EFAD4D;padding-right: 5px;font-weight: bold;}
7：效果
