使用JavaScript實現簡單的輸入校驗

時間 2019-11-24

標籤使用 javascript 實現簡單輸入校驗欄目 JavaScript 简体版

原文原文鏈接

HTML頁面代碼：javascript

 1 <!doctype html>
 2 <html lang="en">
 3  <head>
 4   <meta charset="UTF-8">
 5   <meta name="Generator" content="EditPlus®">
 6   <meta name="Author" content="">
 7   <meta name="Keywords" content="">
 8   <meta name="Description" content="">
 9   <title>Document</title>
10 
11   <script type="text/javascript" src="04.js" charset="GBK"></script>
12  </head>
13  <body>
14 
15   <!--
16   訪問表單節點的元素
17   輸入校驗
18   -->
19 
20   <form action="" id="a">
21      <br/>
22      姓名：<input id="" name="name" type="text" ><br/>
23      密碼：<input id="" name="pass" type="text"/><br/>
24      年齡：<input id="" name="age" type="text"/><br/>
25 
26      <input id="" name="" type="button" value="檢查" onclick="checkForm();"/>
27   </form>
28   <script type="text/javascript">
29      var checkForm = function () {
30        //指明要各個字段要校驗的規則
31          check ("a" , {
32             "name":"required",   //必填
33             "pass":{type:"regex",expr:/\w{4,8}/}, //符合指定的正則表達式，這裏正則表達式的規則是字符長度要在4到8之間
34             "age":"int" //輸入的必須爲整數
35         });
36      }
37   </script>
38  </body>
39 </html>

04.js代碼：

html

 1 //爲String添加一個去除空格的方法：
 2 String.prototype.trim = function(){
 3     return this.replace(/^\s+/,"").replace(/\s+$/,"");
 4 }
 5 
 6 //錯誤信息對象
 7 var errMsg = {
 8   "required":"必須填寫",
 9    "int":"必須是一個整數",
10    "regex":"必須符合要求的格式"
11 }
12 
13 var check = function(formid , fields)  //fields 參數的形式：{表單控件：要知足的規則}
14 {
15     var errResult = "";
16         
17     var targetForm = document.getElementById(formid);
18     //fieldName一次表明fields對象裏的每一個key
19     for (var fieldName in fields )
20     {
21         //alert(fieldName);
22         //根據表單的控件的名稱來獲取相應的表單控件的值
23 
24         var fieldValue = targetForm.elements[fieldName].value;
25         //alert(fieldValue);
26         //獲取每一個表單域應該知足的規則
27 
28         var rule =   fields[fieldName];  //rule多是字符串或者json對象
29         //若是規則是字符串    
30         if(typeof rule == "string")    
31         {
32             switch(rule)                
33             {
34                 case "required":
35                     if(!fieldValue || fieldValue.trim() == "")
36                     {
37                         errResult += ( fieldName + " :" +errMsg["required"]+"\n") ;
38                     }
39                     break;
40                 case "int":
41                     if(fieldValue && fieldValue!=null && fieldValue.trim() != "")
42                     {
43                         if (isNaN(parseInt(fieldValue)))  //若是不是整數
44                         {
45                             errResult += ( fieldName + " :" +errMsg["int"]+"\n") ;
46                         }
47                     }
48                     else
49                         {
50                          errResult += ( fieldName + " :" +errMsg["required"]+"\n") ; //"int"校驗也必須爲必填
51                     }
52                     break;
53             }
54         
55         }
56         
57         //爲json對象
58         else
59         {
60             switch(rule.type)
61             {
62                 case "regex":
63                     if(fieldValue && fieldValue!=null && fieldValue.trim() != "")
64                     {
65                         var reg = eval(rule.expr);  //將字符串轉爲正則表達式 66                         var result = reg.exec(fieldValue);//執行正則表達式，獲得結果 67                         if(!result)
68                         {
69                             errResult += ( fieldName + " :" +errMsg["regex"]+"\n") ;
70                         }
71                     }
72                     else
73                     {
74                         errResult += ( fieldName + " :" +errMsg["required"]+"\n") ;
75                     }
76                     break;
77                 
78             }
79         }
80     }
81 
82     //顯示錯誤信息
83     if(errResult != "")
84     {
85        alert(errResult);
86     }
87     
88 }