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

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

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

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

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

html部分：

 1  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       
12              
13               
14      
15 　　　
16              
17               
18         
19  

下面是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 

 2                  3 4                     　　 5                         　　12                         　　20                         　　27                         　　35                     　　36         　　　　　　37     　　　　　　

                     



 6                             　　

 7                                 　　

 8                                     　　总天数
 9                                　　 
10                             　　
11                         　　

13                             　　

14                                 　　

15                                    　　 16                                                                  name="days" type="text">
17                                 　　
18                             　　
19                        　　 

21                             　　

22                                 　　

23                                     　　总人数
24                                 　　
25                             　　
26                         　　

28                             　　

29                                 　　

30                                     　　31                                                                  name="person" type="text">
32                                 　　
33                             　　
34                         　　



38 
    

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 

 2     

 3         for="idCode">身份证号
 4         
 5     
 6     

 7         for="passwd">密码
 8         
 9     
10 

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新的校验。。接下来都是更让人吐血的动态校验，写完了再更。。。