JavaScript | 基础表单验证（纯Js）

————————————————————————————————————————————

基础表单验证（纯js）

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

验证思路

监听每个input控件的焦点离开（onblue），当焦点离开时调用验证函数，验证后修改第三栏文字，显示符合/不符合并返回true/false

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

实现代码：

index.html

 1 <!DOCTYPE html>
 2 <html>
 3 
 4 <head>
 5     <title></title>
 6     <link rel="stylesheet" href="css.css">
 7 </head>
 8 
 9 <body>
10     <form id="form" action="" method="post" onsubmit="return vilidate()">
11         <table class="table">
12             <tr>
13                 <td>雇员编号</td>
14                 <td>
15                     <input type="text" id="empnb" name="empnb" onblur="validateEmpnb()">
16                 </td>
17                 <td>
18                     <span id="empnbMsg"></span>
19                 </td>
20             </tr>
21             <tr>
22                 <td>雇员姓名</td>
23                 <td>
24                     <input type="text" id="ename" name="ename" onblur="validateEname()">
25                 </td>
26                 <td>
27                     <span id="enameMsg"></span>
28                 </td>
29             </tr>
30             <tr>
31                 <td>雇员职位</td>
32                 <td>
33                     <input type="text" name="epost" id="epost" onblur="validateEpost()">
34                 </td>
35                 <td>
36                     <span id="epostMsg"></span>
37                 </td>
38             </tr>
39             <tr>
40                 <td>雇员日期</td>
41                 <td>
42                     <input type="text" name="" id="edate" name="edate" onblur="validateEdate()">
43                 </td>
44                 <td>
45                     <span id="edateMsg"></span>
46                 </td>
47             </tr>
48             <tr>
49                 <td>基本工资</td>
50                 <td>
51                     <input type="text" name="esalary" id="esalary" onblur="validateEsalary()">
52                 </td>
53                 <td>
54                     <span id="esalaryMsg"></span>
55                 </td>
56             </tr>
57             <tr>
58                 <td>佣金</td>
59                 <td>
60                     <input type="text" name="ebrok" id="ebrok" onblur="validateEbrok()">
61                 </td>
62                 <td>
63                     <span id="ebrokMsg"></span>
64                 </td>
65             </tr>
66             <tr>
67                 <td colspan="3">
68                     <input type="submit" autofocus="autofocus">
69                     <input type="reset">
70                 </td>
71             </tr>
72         </table>
73     </form>
74 </body>
75 <script type="text/javascript" src="./FormValidation.js"></script>
76 
77 </html>

FormValidation.js

 1 // 日期选择
 2 function layDate() {
 3 
 4 }
 5 
 6 // 验证雇员编号,4位纯数字编号
 7 function validateEmpnb() {
 8     return validateRegexp("empnb", /^d{4}$/);
 9 }
10 // 验证雇员姓名,不为空
11 function validateEname() {
12     return validateNull("ename");
13 }
14 // 验证雇员职位,不为空
15 function validateEpost() {
16     return validateNull("epost");
17 }
18 // 验证雇员日期
19 function validateEdate() {
20     return validateRegexp("edate", /^d{4}-d{2}-d{2}$/)
21 }
22 // 验证基本工资
23 function validateEsalary() {
24     return validateRegexp("esalary", /^d+(.d{1,2})?$/)
25 }
26 // 验证佣金
27 function validateEbrok() {
28     return validateRegexp("ebrok", /^d+(.d{1,2})?$/)
29 }
30 
31 // 提交时全部重新验证
32 function validate() {
33     return validateEmpnb() && validateEname() && validateEpost() && validateEdate() && validateEsalary() && validateEbrok();
34 }
35 // 正则表达式验证
36 function validateRegexp(elemName, regexp) {
37     var elem = document.getElementById(elemName);
38     var msg = document.getElementById(elemName + 'Msg')
39     console.log(regexp);
40     console.log(elem.value);
41     if (regexp.test(elem.value)) {
42         msg.innerHTML = 'ok';
43         msg.style.color = 'green';
44         return true;
45     } else {
46         msg.innerHTML = '您的输入不符合规则';
47         msg.style.color = 'red';
48         return false;
49     }
50 }
51 // 不为空验证
52 function validateNull(elemName) {
53     var elem = document.getElementById(elemName);
54     var msg = document.getElementById(elemName + 'Msg');
55     console.log(elem.value);
56     console.log(msg);
57     if (elem.value == '' || elem.value == ' ') {
58         msg.innerHTML = '您的输入不能为空';
59         msg.style.color = 'red';
60         return false;
61     } else {
62         msg.innerHTML = 'ok';
63         msg.style.color = 'green';
64         return true;
65     }
66 }

css.css

 1 html {
 2     font-size: 14px;
 3 }
 4 
 5 .table {
 6     border: 1px grey solid;
 7 }
 8 
 9 .table tr {
10     height: 2rem;
11 }
12 
13 .table td {
14     width: 15rem;
15 }