hidden隐藏域表单应用

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>hidden隐藏域表单应用</title>
 6     <style>
 7         form { margin: 20px auto; width: 500px; padding: 20px; border: 1px solid #ccc; box-shadow: 0 0 5px #ccc; border-radius:10px;}
 8         #regUnlock {display: none;}
 9         textarea { vertical-align: top; resize:none;}
10         #reBtn{ margin-left: 47px;}
11     </style>
12 </head>
13 <body>
14     <form action="" method="post">
15     <input type="hidden" id="errnum" value="0" name="">
16         账号：<input type="text" name="" id="userid"><br/><br/>
17         密码：<input type="password" name="" id="userpwd"><br/><br/>
18         确认：<input type="password" name="" id="userrepwd"><br/><br/>
19         简介：<textarea name="" id="about" cols="30" rows="10"></textarea><br/><br/>
20         <input type="submit" id="reBtn" value="注册" onclick="return eg.regCheck();">
21         <input type="button" id="regUnlock" value="解锁" onclick="eg.unlock()">
22     </form>
23     <script>
24         //这个demo演示了通过隐藏域来追踪用户输入错误的数量，从而控制用户进行进一步操作
25         //并没有为每个文本域单独设置对应的hidden隐藏域
26 
27         //声明一个对象，当作命名空间使用
28         var eg={};
29         //在eg对象基础上添加一个公共函数用来获取页面id元素，减少代码量，提高代码复用率
30         eg.getId = function(id) {
31             return document.getElementById(id);
32         }
33         //主要验证方法
34         eg.regCheck = function(){
35             var uid = eg.getId('userid');
36             var upwd = eg.getId('userpwd');
37             var upwd2 = eg.getId('userrepwd');
38             var about = eg.getId('about');
39             if (uid.value == '') {
40                 alert('账号不能为空！');
41                 eg.err();
42                 return false;
43             };
44             if (upwd.value == '') {
45                 alert('密码不能为空！');
46                 eg.err();
47                 return false;
48             };
49             if (upwd2.value != upwd.value) {
50                 alert('两次密码输入不一致！');
51                 eg.err();
52                 return false;
53             };
54 
55             if (about.value.length>60) {
56                 alert('简介字符长度不能超过60个！');
57                 eg.err();
58                 return false;
59             };
60 
61             return true;    
62         };
63 
64     eg.err = function(){
65         var el = eg.getId('errnum');
66         el.value = parseInt(el.value)+1;
67         eg.lock();
68     };
69 
70     eg.lock = function(){
71         var err= eg.getId('errnum');
72         if (parseInt(err.value)>2) {
73             //如果输入错误次数超过3次就锁定注册按钮
74             eg.getId('reBtn').disabled = true;
75             //同时显示解锁按钮
76             eg.getId('regUnlock').style.display = 'inline-block';
77         };
78     };
79 
80     eg.unlock = function(){
81         //点击解锁使注册按钮重新可用
82         eg.getId('reBtn').disabled = false;
83         eg.getId('regUnlock').style.display = 'none';
84         var err= eg.getId('errnum');
85         err.value = 0;
86     };
87     </script>
88 </body>
89 </html>