<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>处理各种类型表单一</title> </head> <body> <form method="post" action="" onsubmit="return eg.regCheck();"> 账户:<input type="text"/><br/><br/> 密码:<input type="password"/><br/><br/> 确认:<input type="password"/><br/><br/> 简介: <textarea rows="4" cols="18"> </textarea><br/><br/> <input type="submit" value="注册" /> <input type="button" value="解锁"> </form> <script> //声明一个对象,当做命名空间来使用 //定义一个公共函数来获取指定id元素,减少代码量,提高代码复用率 var eg = {}; eg.$ = function(id){ return document.getElementById(id); }; //主要的验证方法 eg.regCheck = function () { var uid = eg.$("userid"); var upwd = eg.$("userpwd"); var upwd2 = eg.$("userpwd2"); //value是元素自带属性 if(uid.value == ''){ alert('账户不能为空!'); eg.err(); return false; } if(upwd.value == ''){ alert('密码不能为空!'); eg.err(); return false; } if(upwd.value != upwd2.value){ alert('两次输入密码不相同!'); eg.err(); return false; } //新增部分 var about = eg.$("about"); //value是字符串类型的属性 if (about.value.length>60){ alert("简介太长!"); eg.err(); return false; } //返回true就会提交表单 return true; }; //出错时记录错误次数 eg.err = function () { var el = eg.$("errnum"); var old = el.value; //把字符串转换为整数+1,并保存起来 el.value = parseInt(old)+1; //用来检查是否应该锁定 eg.lock(); }; //通过次数判断是否要锁定 eg.lock = function(){ var err = eg.$("errnum"); if (parseInt(err.value)>2){ eg.$("regBtn").disabled = true; //根据业务需求,输错3次就锁定 eg.$("regUnlock").style.display="block"; //同时显示解锁按钮 } }; eg.unlock = function(){ eg.$("regBtn").disabled = false; //根据业务需求，解锁就是让用户可以重新注册 eg.$("regUnlock").style.display="none"; //元素所有样式都挂载到style属性下 } </script> </body> </html>
现在制作一个错误统计,可以为后台系统保存起来用于分析用户的错误率，甚至可以分析出用户一般会在哪些字段上出错。记录错误信息不需要给用户看到，可以选择input的type属性是hidden的元素来存储
2.2checkbox,radio和select
知道用户性别,年龄,兴趣爱好
例子:
处理各种类型表单二
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>处理各种类型表单二</title> </head> <body> <form method="post" action="" onsubmit="return eg.regCheck();"> 账户:<input type="text"/><br/><br/> 密码:<input type="password"/><br/><br/> 确认:<input type="password"/><br/><br/> 简介: <textarea rows="4" cols="18"> </textarea><br/><br/> <input type="submit" value="注册" /> <input type="button" value="解锁"> </form> <script> //声明一个对象,当做命名空间来使用 //定义一个公共函数来获取指定id元素,减少代码量,提高代码复用率 var eg = {}; eg.$ = function(id){ return document.getElementById(id); }; //主要的验证方法 eg.regCheck = function () { var uid = eg.$("userid"); var upwd = eg.$("userpwd"); var upwd2 = eg.$("userpwd2"); //value是元素自带属性 if(uid.value == ''){ alert('账户不能为空!'); eg.err(); return false; } if(upwd.value == ''){ alert('密码不能为空!'); eg.err(); return false; } if(upwd.value != upwd2.value){ alert('两次输入密码不相同!'); eg.err(); return false; } //新增部分 var about = eg.$("about"); //value是字符串类型的属性 if (about.value.length>60){ alert("简介太长!"); eg.err(); return false; } //返回true就会提交表单 return true; }; //出错时记录错误次数 eg.err = function () { var el = eg.$("errnum"); var old = el.value; //把字符串转换为整数+1,并保存起来 el.value = parseInt(old)+1; //用来检查是否应该锁定 eg.lock(); }; //通过次数判断是否要锁定 eg.lock = function(){ var err = eg.$("errnum"); if (parseInt(err.value)>2){ eg.$("regBtn").disabled = true; //根据业务需求,输错3次就锁定 eg.$("regUnlock").style.display="block"; //同时显示解锁按钮 } }; eg.unlock = function(){ eg.$("regBtn").disabled = false; //根据业务需求，解锁就是让用户可以重新注册 eg.$("regUnlock").style.display="none"; //元素所有样式都挂载到style属性下 } </script> </body> </html>