jquery.validate插件在booststarp中的运用

现在在网络上已经可以找到很多基于bootstarp的表单认证，但是验证的都不全面的，下载后，我们还要理解作者的思路然后进行修改添加，这种修改方式往往适合学习，时间很多的时候。但是我们很多时候是没有时间去慢慢理解和修改。所以我们还是老实点，用validate来做bootstarp表单认证吧，我这里用的是取巧的方式，正常使用的判断状态应该是用bootstarp提供的表单状态类如has-error。等有时间的时候我们再来修改下。现在就先用下面的方法。

1：首先我们去validate官网下载 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

 <form class="form-horizontal" role="form" id="sign_form">            <div class="form-group">    <label for="realname" class="col-sm-3 control-label"><i class="required_span">*</i>真实姓名：</label>    <div class="col-sm-6">      <input type="text" class="form-control" id="realname" name="realname" placeholder="输入真实姓名">    </div>  </div>              <div class="form-group">    <label for="conplay" class="col-sm-3 control-label"><i class="required_span">*</i>公司名称：</label>    <div class="col-sm-6">      <input type="text" class="form-control" id="conplay" name="conplay" placeholder="输入公司名称">    </div>  </div>           <div class="form-group">    <label for="phone" class="col-sm-3 control-label"><i class="required_span">*</i>公司号码：</label>    <div class="col-sm-6">      <input type="text" class="form-control" id="phone" name="phone" placeholder="输入公司号码">    </div>  </div>           <div class="form-group">    <label for="mobile" class="col-sm-3 control-label"><i class="required_span">*</i>手机号码：</label>    <div class="col-sm-6">      <input type="text" class="form-control" id="mobile" name="mobile" placeholder="输入手机号码">    </div>  </div>           <div class="form-group">    <label for="position" class="col-sm-3 control-label"><i class="required_span">*</i>职位：</label>    <div class="col-sm-6">      <input type="text" class="form-control" id="position" name="position" placeholder="输入职位">    </div>  </div>           <div class="form-group">    <label for="email" class="col-sm-3 control-label"><i class="required_span">*</i>邮箱地址：</label>    <div class="col-sm-6">      <input type="email" class="form-control" id="email" name="email" placeholder="[e-mail]">    </div>  </div>            <div class="form-group">    <label for="yan_code" class="col-sm-3 control-label"><i class="required_span">*</i>验证码：</label>    <div class="col-sm-6 code">    <ul class="list-unstyled list-inline">      <li><input type="email" class="form-control" id="yan_code" name="yan_code" placeholder="输入验证码">  </li>      <li><img src="images/code.jpg" alt=""></li>      <li>换一张</li>    </ul>    </div>  </div>         <div class="form-group">    <label for="" class="col-sm-3 "></label>    <div class="col-sm-6">     <input type="submit" value="提交" class="btn  btn01" id="sign_form_submit">    </div>  </div></form>

6:修改下样式 。

/*表单重置*/

.error{border-color: #F16951;color: #bf432e;}.valid{border-color: #5CB85C;}.required_span{color: #EFAD4D;padding-right: 5px;font-weight: bold;}

7：效果