jquery.validate插件在booststarp中的运用

2022-09-28 13:19:03

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

1：首先我们去validate官网下载 jQuery
Validate插件

2：在页面中引入jQuery
Validate库

3：重置下提示信息，默认的提示信息为英文。

==============================内容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:需要判断的正则

==============================内容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：效果

码农公寓

相关文章