js--吐血總結最近遇到的變態表單校驗---element+原生+jq+easyUI（前端職業生涯見過的最煩的校驗）

花開不敗zy發表於2021-05-11
JSUI前端

最近寫了無數各種形式的表單，記錄下奇奇怪怪的校驗規則~

一：首先是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新的校驗。。接下來都是更讓人吐血的動態校驗，寫完了再更。。。






相關文章