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>