JavaScript实现表单验证_02

注册3次错误，最终的结果：

代码：

 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="UTF-8">
         <title>表单验证_02</title>
     </head>
     <body>
         <!--把验证放在注册按钮的onclick事件属性里使用，同样还有另一种调用方式，就是form标签的onsubmit事件属性，，功能一样<br />-->
         <form method="post" onsubmit="return eg.regCheck()" action="">
         <input type="hidden" id="errnum" value="0"/>
         <!--由于错误的次数无需显示出来，所以将其隐藏起来-->

         账号：<input type="text" name="" id="userid" /><br/><br/>
         密码：<input type="password" name="" id="userpassword" /><br/><br/>

       确认密码：<input type="password" name="" id="userpassword1" /><br/><br/>
         简介：<textarea name="" rows="4" cols="18" id="about"></textarea><br/><br/>
         <input type="submit"  value="注册" id="regBtn"  />
         <input type="button"  value="解锁"  id="regUnlock" style="display: none;"  onclick="eg.unlock()" />
         </form>
         <script>
             var eg={};
             //声明一个对象，当作命名空间来使用

             //定义一个公共函数来获取id元素，减少代码量，提高代码复用率
             eg.$=function(id){
                 return document.getElementById(id);
             };
             eg.regCheck=function(){
                 var uid=eg.$("userid");
                 var upwd=eg.$("userpassword");
                 var upwd1=eg.$("userpassword1");
                 var about=eg.$("about");

                 if(uid.value=='')
                 {
                     alert('账号不能为空！！！');
                         eg.err();
                     return false;//返回false就会阻止表单的提交
                 }

                 if(upwd.value==''){
                     alert('密码不能为空！！');
                         eg.err();
                     return false;//返回false就会阻止表单的提交
                 }
                 if(upwd.value!=upwd1.value)
                 {
                     alert('输入密码不一致!!!');
                         eg.err();
                     return false;//返回false就会阻止表单的提交

                 }
                 if(about.value.length>60)//valu是字符串的属性
                 {
                     alert('简介太长!!!');
                     eg.err();
                     return false;
                 }
                 return true;//返回true就会允许表单的提交
             };

             //出错时记录错误次数
             eg.err=function(){
                 var el=eg.$("errnum");
                 var old=el.value;

                 el.value=parseInt(old)+1;//把字符串转换为整数+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>

表单验证_02.html

在进行验证注册时，我们有两种方式：

1. 把验证放在注册按钮的onclick事件属性里使用。

2.form标签的onsubmit事件属性。例如本例中

<form method="post" onsubmit="return eg.regCheck()" action="">

本示例特点：

在以前我们都是直接提示错误信息就行了，在该例中我采用的是进行错误的统计，这些统计的数据非常有用，可以为后台系统保存起来用于分析用户的错误率，甚至可以分析出用户一般会在那一些字段出错。当然记录的错误信息不给用户看到，可以使用input的type属性是hidden元素来进行隐藏，用户如果输入3次错误就会显示解锁的按钮，而注册的按钮也不能再使用，当点击解锁时，可以再进行注册。