表单校验（正则表达式） 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>表单校验</title>
 7     <link rel="stylesheet" href="css/style.css"></link>
 8 </head>
 9 <body>
10     <div class="login-form-wrap">
11         <h1>程序员</h1>
12         <form class="login-form" action="#" id="regist" method="get" autocomplete="off">
13             <label>
14                 <input type="text" id="username" name="username" placeholder="Username..." value="">
15             </label>
16             <label>
17                 <input type="password" id="password" name="password" placeholder="Password..." value="">
18             </label>
19             <input type="submit" value="注册">
20         </form>
21     </div>
22 </body>
23 <script>
24     //1.为表单绑定提交事件
25     document.getElementById("regist").onsubmit = function() {
26         //2.获取填写的用户名和密码
27         let username = document.getElementById("username").value;
28         let password = document.getElementById("password").value;
29 
30         //3.判断用户名是否符合规则  4~16位纯字母
31         let reg1 = /^[a-zA-Z]{4,16}$/;
32         if(!reg1.test(username)) {
33             alert("用户名不符合规则，请输入4到16位的纯字母！");
34             return false;
35         }
36 
37         //4.判断密码是否符合规则  6位纯数字
38         let reg2 = /^[\d]{6}$/;
39         if(!reg2.test(password)) {
40             alert("密码不符合规则，请输入6位纯数字的密码！");
41             return false;
42         }
43 
44         //5.如果所有条件都不满足，则提交表单
45         return true;
46     }
47     
48 </script>
49 </html>

 

posted @ 2020-09-06 12:05  L_697  阅读(339)  评论(0)    收藏  举报