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 names
var 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的Id
errorElement : 'span',


rules : {  下面的是判断规则，这里解析一条，有的人喜欢把它们放在html内联，但个人喜欢提取出来统一放置。
realname: {    需要判断的input name
required: 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="1111111111@qq.com">
    </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：效果