jq+easyUI（前端职业生涯见过的最烦的校验）

最近写了无数各种形式的表单，记录下奇奇怪怪的校验规则~

一：首先是element自带的rules校验规则：

element作为常用框架，自带rules属性简单易懂，官方文档一目了然，不再赘述，应付常用校验足够了，文章转载自乐字节

推荐一个我觉得不错的web全套教程：B站搜索：BV1uy4y1s7yr

相对麻烦的是自定义的校验函数，举个例子：

html部分：

                     :rules="rules"
                     :inline="true"
                    :model="form"
                    size="medium"
                    ref="form"
                   label-position="right"
                   label-width="136px"
                   validate-on-rule-change
                  class="postForm" autocomplete="off" inline-message>
   <el-form-item prop="phone">
            <el-input v-model="form.phone" name="phone" id="phone" size="medium" required>
            </el-input>
   </el-form-item>
　　<el-form-item prop="money">
           <el-input v-model="form.money" name="money" id="money" size="medium" required>
            </el-input>
      </el-form-item>   
  </el-form>

下面是js部分：

  phone: [
                             { required: true, message: '请输入手机号码', trigger: 'blur' },
                            { validator:function(rule,value,callback){
                                     if(/^1[34578]\d{9}$/.test(value) == false&&/^\d{4}-?\d{4}$/.test(value) == false){
                                        callback(new Error("请输入正确的手机号或电话号码"));
                                    }else{
                                        callback();
                                    }
                               }, trigger: 'blur'
                             }
           ],
 　　money: [
                            {required: true, message: '请输入金额', trigger: 'change'},
                            { validator:function(rule,value,callback){
                                     let num=Number(me.numRep)+Number(me.meetingForm.numWork)
                                    if(/^\d+(\.\d{1,6})?$/.test(value) == false){
                                         callback(new Error("最长可输入6位小数点，系统限制最大不能超过 550*总人数/10000"));
                                    }else if(Number(value) >num*550/10000){
                                         callback(new Error("最长可输入6位小数点，系统限制最大不能超过 550*总人数/10000"));
                                   }
                                     else{
                                         callback();
                                    }
                                 }, trigger: 'blur'}
           　　]
 }

接下来是调用：

                     this.$refs[formName].validate((valid) => {
                         if(valid) {
                             this.validateForm=true;
                         }else{
                             this.$message.warning("请确认输入信息无误！");
                            this.validateForm=false;
                         }
                    });
                    return this.validateForm;
                 },

二：接下来也是比较常用的，jQuery+easyUI 的表单校验：

依旧直接上例子：

html部分：

               <table role="table" class="desigerTable" data-usage="基本信息录入" id="t5" cellpadding="10" cellspacing="10">
                     <tbody>
                     　　<tr>
                         　　<td class="targetarea droppable">
                             　　<div data-type="1">
                                 　　<div class="form-group">
                                      　　<label class="col-sm-4 control-label">总天数</label>
                                 　　 </div>
                            　　</div>
                         　　</td>                         　　<td class="targetarea droppable">
                             　　<div data-type="1" class="wrapper">
                                 　　<div class="form-group">
                                   　　 <input class="form-control" placeholder="" id="days"
                                                                  name="days" type="text">
                                 　　</div>
                             　　</div>
                       　　 </td>
                         　　<td class="targetarea droppable">
                             　　<div data-type="1">
                                 　　<div class="form-group">
                                     　　<label class="col-sm-4 control-label">总人数</label>
                                 　　</div>
                             　　</div>
                         　　</td>
                         　　<td class="targetarea droppable" colspan="2">
                             　　<div data-type="1" class="wrapper">
                                 　　<div class="form-group">
                                     　　<input class="form-control" placeholder="" id="person"
                                                                  name="person" type="text">
                                 　　</div>
                             　　</div>
                         　　</td>
                    　　</tr>
         　　　　　　</tbody>
     　　　　　　</table>
 </form>    

js部分：

       * 校验主表单
       */
      var formValidate = function () {
          //表单验证规则
          $("#formA").validate({
              ignore: "",
              rules: {
                  days: {required: false,number: true,checkDur:true},
                 person: {required: false,number: true,checkPerson:true},
             },
             messages: {
                 days: {
                     number: "请输入数字",
                     checkDays:"*总天数不超过2天，可输入小数，0.5，1，1.5！"
                 },
                 person: {
                     number: "请输入数字",
                     checkPerson:"*请输入正整数！"
                 },
             },
             //是否在获取焦点时验证
             onfocusout:false,
             //是否在敲击键盘时验证
             onkeyup:false,
             //提交表单后，（第一个）未通过验证的表单获得焦点
             focusInvalid:true,
             //当未通过验证的元素获得焦点时，移除错误提示
             focusCleanup:true,
         });
         $.validator.addMethod("checkDays",function(value,element){
             if(value == 0.5||value == 1||value == 1.5||value == 2){
                 return this.optional(element)||true
             }
         },"*总天数不超过2天，可输入小数，0.5，1.5！");
         $.validator.addMethod("checkPerson",function(value,element){
             var me = /(^[1-9]\d*$)/;
             return this.optional(element)||(me.test(value));
         },"*请输入正整数！");
     /**
      * 校验方法调用
      */
     var dataValidate = function (data) {
         if (!$("#formA").valid()) {
             Util.alert("请输入正确的数据！");
             return false;
         }
         return data;
     };

三：原生js form表单校验：

原生js校验可直接调用onclick，onfocus，onblur，onkeyup等事件来实现

（ps：原生真的永远的神，没有什么是原生js做不到的，如果做不到，就是我太菜了，继续滚去学原生。。）

继续简单明了举例子：

html部分：

      <div>
          <label for="idCode">身份证号</label>
          <input type="text" id="idCode" class="idCode"     name="idCode" placeholder="身份证号"/>
      </div>
      <div>
          <label for="passwd">密码</label>
          <input type="passwd" name="passwd" id="passwd" class="passwd" placeholder="密码"/>
      </div>
 </form>

js部分：

     　　 blurElement();
    　　  submitForm();
  　　}
  　　//元素失去焦点时校验
      function blurElement() {
          //验证姓名
          document.getElementById("ame").onblur = function () {
          vailidateName();
     };
 
     //表单提交函数
     function submitForm() {
         let form = document.getElementsByClassName("register")[0];
         form.onsubmit = function (e) {
         let flag =vailidateName()& vailidatePasswd()& vailidateID();
         return flag == 1 ? true : false;
         };
     }
     //验证身份证号码 18位
     function vailidateID() {
         let id = document.getElementById("idCode");
         let span = next(id);
         let value = id.value;
         //判断空
         if (value == "") {
             span.innerHTML = "身份证号码不能为空";
             span.style.color = "red";
             return false;
         }
         //判断长度
         if (value.length != 18) {
             span.innerHTML = "身份证号码长度18位";
             span.style.color = "red";
             return false;
         }
         //判断前17位数字
         let reg = /^\d{17}$/;
         let str = value.substring(0, 17);
         if (!reg.test(str)) {
             span.innerHTML = "身份证号码前17位必须是数字";
             span.style.color = "red";
             return false;
         }
         //验证密码:6-12位非空，必须包含大写字符，字母开头
         function vailidatePasswd() {
             let passwd = document.getElementById("passwd");
             let span = next(passwd);
             let value = passwd.value;
             let code = /^[a-zA-Z]$/;
        //非空
         if (value == "") {
             span.innerHTML = "密码不能为空";
             span.style.color = "red";
             return false;
         }  
 　　}                    

ok，结束，以上就是最近写的典型的前端校验表单例子，还在跟需求battle新的校验。。接下来都是更让人吐血的动态校验，写完了再更。。。

文章转载自乐字节