js--吐血总结最近遇到的变态表单校验---element+原生+jq+easyUI（前端职业生涯见过的最烦的校验）

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

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

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

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

html部分：

 1 <el-form id="form"
 2                    :rules="rules"
 3                    :inline="true"
 4                    :model="form"
 5                    size="medium"
 6                    ref="form"
 7                    label-position="right"
 8                    label-width="136px"
 9                    validate-on-rule-change
10                    class="postForm" autocomplete="off" inline-message>
11       <el-form-item prop="phone">
12              <el-input v-model="form.phone" name="phone" id="phone" size="medium" required>
13               </el-input>
14      </el-form-item>
15 　　　<el-form-item prop="money">
16              <el-input v-model="form.money" name="money" id="money" size="medium" required>
17               </el-input>
18      </el-form-item>
19  </el-form>

下面是js部分：

 1 rules:{
 2     phone: [
 3                             { required: true, message: '请输入手机号码', trigger: 'blur' },
 4                             { validator:function(rule,value,callback){
 5                                     if(/^1[34578]\d{9}$/.test(value) == false&&/^\d{4}-?\d{4}$/.test(value) == false){
 6                                         callback(new Error("请输入正确的手机号或电话号码"));
 7                                     }else{
 8                                         callback();
 9                                     }
10                                 }, trigger: 'blur'
11                             }
12            ],
13 　　money: [
14                             {required: true, message: '请输入金额', trigger: 'change'},
15                             { validator:function(rule,value,callback){
16                                     let num=Number(me.numRep)+Number(me.meetingForm.numWork)
17                                     if(/^\d+(\.\d{1,6})?$/.test(value) == false){
18                                         callback(new Error("最长可输入6位小数点，系统限制最大不能超过 550*总人数/10000"));
19                                     }else if(Number(value) >num*550/10000){
20                                         callback(new Error("最长可输入6位小数点，系统限制最大不能超过 550*总人数/10000"));
21                                     }
22                                     else{
23                                         callback();
24                                     }
25                                 }, trigger: 'blur'}
26           　　]
27 }

接下来是调用：

 1 formValidate(formName){
 2                     this.$refs[formName].validate((valid) => {
 3                         if(valid) {
 4                             this.validateForm=true;
 5                         }else{
 6                             this.$message.warning("请确认输入信息无误！");
 7                             this.validateForm=false;
 8                         }
 9                     });
10                     return this.validateForm;
11                 },

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

依旧直接上例子：

html部分：

 1 <form id="formA" class="postForm" autocomplete="off">
 2                 <table role="table" class="desigerTable" data-usage="基本信息录入" id="t5" cellpadding="10" cellspacing="10">
 3                     <tbody>
 4                     　　<tr>
 5                         　　<td class="targetarea droppable">
 6                             　　<div data-type="1">
 7                                 　　<div class="form-group">
 8                                     　　<label class="col-sm-4 control-label">总天数</label>
 9                                　　 </div>
10                             　　</div>
11                         　　</td>
12                         　　<td class="targetarea droppable">
13                             　　<div data-type="1" class="wrapper">
14                                 　　<div class="form-group">
15                                    　　 <input class="form-control" placeholder="" id="days"
16                                                                  name="days" type="text">
17                                 　　</div>
18                             　　</div>
19                        　　 </td>
20                         　　<td class="targetarea droppable">
21                             　　<div data-type="1">
22                                 　　<div class="form-group">
23                                     　　<label class="col-sm-4 control-label">总人数</label>
24                                 　　</div>
25                             　　</div>
26                         　　</td>
27                         　　<td class="targetarea droppable" colspan="2">
28                             　　<div data-type="1" class="wrapper">
29                                 　　<div class="form-group">
30                                     　　<input class="form-control" placeholder="" id="person"
31                                                                  name="person" type="text">
32                                 　　</div>
33                             　　</div>
34                         　　</td>
35                     　　</tr>
36         　　　　　　</tbody>
37     　　　　　　</table>
38 </form>    

js部分：

 1 /**
 2      * 校验主表单
 3      */
 4     var formValidate = function () {
 5         //表单验证规则
 6         $("#formA").validate({
 7             ignore: "",
 8             rules: {
 9                 days: {required: false,number: true,checkDur:true},
10                 person: {required: false,number: true,checkPerson:true},
11             },
12             messages: {
13                 days: {
14                     number: "请输入数字",
15                     checkDays:"*总天数不超过2天，可输入小数，0.5，1，1.5！"
16                 },
17                 person: {
18                     number: "请输入数字",
19                     checkPerson:"*请输入正整数！"
20                 },
21             },
22             //是否在获取焦点时验证
23             onfocusout:false,
24             //是否在敲击键盘时验证
25             onkeyup:false,
26             //提交表单后，（第一个）未通过验证的表单获得焦点
27             focusInvalid:true,
28             //当未通过验证的元素获得焦点时，移除错误提示
29             focusCleanup:true,
30         });
31         $.validator.addMethod("checkDays",function(value,element){
32             if(value == 0.5||value == 1||value == 1.5||value == 2){
33                 return this.optional(element)||true
34             }
35         },"*总天数不超过2天，可输入小数，0.5，1.5！");
36         $.validator.addMethod("checkPerson",function(value,element){
37             var me = /(^[1-9]\d*$)/;
38             return this.optional(element)||(me.test(value));
39         },"*请输入正整数！");
40     /**
41      * 校验方法调用
42      */
43     var dataValidate = function (data) {
44         if (!$("#formA").valid()) {
45             Util.alert("请输入正确的数据！");
46             return false;
47         }
48         return data;
49     };

三：原生js form表单校验：

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

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

继续简单明了举例子：

html部分：

 1 <form action="example.html" method="post" enctype="multipart/form-data" class="register">
 2     <div>
 3         <label for="idCode">身份证号</label>
 4         <input type="text" id="idCode" class="idCode"     name="idCode" placeholder="身份证号"/>
 5     </div>
 6     <div>
 7         <label for="passwd">密码</label>
 8         <input type="passwd" name="passwd" id="passwd" class="passwd" placeholder="密码"/>
 9     </div>
10 </form>

js部分：

 1 　　onload = function () {
 2    　　 blurElement();
 3   　　  submitForm();
 4 　　}
 5 　　//元素失去焦点时校验
 6     function blurElement() {
 7         //验证姓名
 8         document.getElementById("ame").onblur = function () {
 9         vailidateName();
10     };
11
12     //表单提交函数
13     function submitForm() {
14         let form = document.getElementsByClassName("register")[0];
15         form.onsubmit = function (e) {
16         let flag =vailidateName()& vailidatePasswd()& vailidateID();
17         return flag == 1 ? true : false;
18         };
19     }
20     //验证身份证号码 18位
21     function vailidateID() {
22         let id = document.getElementById("idCode");
23         let span = next(id);
24         let value = id.value;
25         //判断空
26         if (value == "") {
27             span.innerHTML = "身份证号码不能为空";
28             span.style.color = "red";
29             return false;
30         }
31         //判断长度
32         if (value.length != 18) {
33             span.innerHTML = "身份证号码长度18位";
34             span.style.color = "red";
35             return false;
36         }
37         //判断前17位数字
38         let reg = /^\d{17}$/;
39         let str = value.substring(0, 17);
40         if (!reg.test(str)) {
41             span.innerHTML = "身份证号码前17位必须是数字";
42             span.style.color = "red";
43             return false;
44         }
45         //验证密码:6-12位非空，必须包含大写字符，字母开头
46         function vailidatePasswd() {
47             let passwd = document.getElementById("passwd");
48             let span = next(passwd);
49             let value = passwd.value;
50             let code = /^[a-zA-Z]$/;
51         //非空
52         if (value == "") {
53             span.innerHTML = "密码不能为空";
54             span.style.color = "red";
55             return false;
56         }
57 　　}                    

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