在线考试系统——注册demo（个人记录）

突然想开始记录自己的学习过程和收获。希望自己回过头来看的时候，能够有不同的感觉。

今天花了点时间做了一个用js写的注册验证的demo

以下是html的代码：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>在线题库</title>
 6         <script src="js/Register.js" type="text/javascript" charset="utf-8"></script>
 7     </head>
 8     <body>
 9         <div class="register">
10             <div class="User">
11                 
12                 <!-- 用户名 -->
13                 <div id="userName">
14                     <input type="text" value="" id="rg_userName" placeholder="用户名" onblur="checkName()" />
15                     <div id="userError"><br></div>
16                 </div>
17                 
18                 <!--用户密码 -->
19                 <div class="passWord">
20                     <input type="password" value="" id="rg_passWord" placeholder="密码" onblur="checkPassword()" />
21                     <div id="pwdError"><br></div>
22                 </div>
23                 
24                 <!--确认密码 -->
25                 <div class="confirm_Pwd">
26                     <input type="password"  id="rg_confirmPwd" placeholder="确认密码" onblur="checkpwdagin()" />
27                     <div id="cfPwdError"><br></div>
28                 </div>
29                 
30                 <!--手机号-->
31                 <div id="phoneNum">
32                     <input type="text" value="" id="rg_phoneNum" placeholder="手机号" onblur="checkphoneNum()"/>
33                     <div id="phoneNumError"><br></div>
34                 </div>
35                 
36                 <p>点击确认代表您已同意<a href="#"> 《网站服务条款》</a>、<a href="#">《网站隐私政策》</a></p>
37                 <div class="Register">
38                     <input type="button" value="确认" name="" />
39                 </div>
40             </div>
41             
42             
43         </div>
44     </body>
45 </html>

一下是js代码:

 1     function checkName(){
 2         var rUserName = document.getElementById("rg_userName").value;
 3         var rDivname  = document.getElementById("userError");
 4         if(rUserName == "")
 5         {
 6             rDivname.innerHTML ="<font color='red'>用户名不能为空</font>";
 7         }
 8         for(var i = 0;i<rUserName.length; i++){
 9             var text = rUserName.charAt(i);
10             if(!(text <= 9&& text >= 0) && !(text >= 'a' && text<='z') 
11             &&!(text >='A' && text <= 'Z') && text!= '_')
12             {
13                 rDivname.innerHTML = "<font color='red'>用户名只能是数字、字母、下划线组成</font>"
14                 break;
15             }
16         }
17         if(i >= rUserName.lengthAdjust)
18         {
19             rDivname.innerHTML = "<font color='aquamarine'>√</font>"
20             return true;
21         }
22         
23     }
24     
25     function checkPassword(){
26         var rPassword = document.getElementById("rg_passWord").value;
27         var rDivpwd   = document.getElementById("pwdError");
28         if(rPassword == "")
29         {
30             rDivpwd.innerHTML = "<font color='red'>密码不能为空</font>"
31             return false;
32         }
33         else if(rPassword.length < 6)
34         {
35             rDivpwd.innerHTML = "<font color='red'>密码至少为六位!</font>"
36             return false;
37         }
38         else 
39         {
40             rDivpwd.innerHTML = "<font color='aquamarine'>√</font>";
41             return true;
42         }    
43     }
44     
45     function checkpwdagin(){
46         var rPassword_one = document.getElementById("rg_passWord").value;
47         var rConfirmpwd = document.getElementById("rg_confirmPwd").value;
48         var rDivpwdagin   = document.getElementById("cfPwdError");
49         if(rConfirmpwd == "")
50         {
51             rDivpwdagin.innerHTML = "<font color='red'>确认密码不能为空</font>";
52             return false;
53         }
54         if(rPassword_one != rConfirmpwd);
55         {
56             rDivpwdagin.innerHTML = "<font color='red'>确认密码与密码不一致！</font>"
57             return false;
58         }
59         if(rPassword_one == rConfirmpwd)
60         {
61             rDivpwdagin.innerHTML = "<font color='aquamarine'>√</font>";
62             return true;
63         }
64     }
65 
66     function checkphoneNum(){
67         var rPhone = document.getElementById("phoneNum").value;
68         var rDiverror =  document.getElementById("phoneNumError");
69         if(rPhone != "")
70         {
71             var reg = /^[0-9]{11}$/i;
72             if(!reg.test(rPhone))
73             {
74                 rDiverror.innerHTML = "<font color='red'>只能输入11位数字</font>"
75             }
76         }
77         else 
78         {
79             rDiverror.innerHTML = "<font color='aquamarine'>√</font>";
80             return true;
81         }
82         
83     }
84     
85

注意：

1.在checkpwdagin（）函数中我用的是if.....if.....if，这里如果用if....else..if.....else的话，会出现

Uncaught SyntaxError: Unexpected token else

这个错误。意为：此函数未定义。是因为，else这里的判断条件会出错。

当把判断语句都改为if的时候，可以正常运行。

欢迎大神来提意见。

posted @ 2019-04-19 17:18  橘子皮儿儿  阅读(83)  评论(0)    收藏  举报