Javascript（五）javascript实现表单验证

表单验证

为了保证用户提交的信息都是正确的，保证系统的安全性，验证是必不可少的，验证一般分为两种方式。

• 客户端验证：直接在客户端执行JS进行验证，验证的过程中和服务器端没有任何的交互
• 服务器端验证：页面将验证信息传回服务器端，服务器端进行验证，并将验证的结果发送回客户端

这两个验证都是必须的，因为客户端的验证安全性不是太高，但是可以防止80%以上的用户的误操作，可以减轻服务器端的压力，而且速度非常快，用户体验高。不要以为有了客户端的验证就不需要了服务器端的了，客户端的验证是很容易绕过去的，服务器端验证安全性比较高，所以一般验证两个验证都需要写。

先看看下面这个注册界面，对用户的注册信息我们是有要求。不正确的信息是不会提交给后台服务器的。每一个控件我们都分别定义了对应的验证方法。

<form action="doregisert.jsp" id="formsub" >     <table>     <tr>         <td>用户名：</td>         <td><input type="text" name="username" id="username"         onblur="checkusername()" /></td>         <td><span id="usernameerror"></span></td>     </tr>     <tr>         <td>密码:</td>         <td><input type="password" name="pass" id="pass"         onblur="checkpass()" /></td>         <td><span id="passerror"></span></td>     </tr>     <tr>         <td>确认密码:</td>         <td><input type="password" name="pass2" id="pass2"         onblur="checkpass2()" /></td>         <td><span id="pass2error"></span></td>     </tr>     <tr>         <td>邮箱:</td>         <td><input type="text" name="useremail" id="useremail"         onblur="checkuseremail()" /></td>         <td><span id="useremailerror"></span></td>     </tr>     <tr>         <td>固定电话:</td>         <td><input type="text" name="uerphone" id="uerphone" /></td>         <td><span id="uerphoneerror"></span></td>     </tr>     <tr>         <td ><input type="submit" value="注册"  /></td>          <td ><input type="reset" value="重置"  /></td>     </tr>     </table> </form>

实现验证验证方法：

<script type="text/javascript">    function checkusername(){         var username=document.getElementById("username");         var usernameerror=document.getElementById("usernameerror");         var unamevalue=username.value;         if(unamevalue.length<6||unamevalue.length>20){             usernameerror.innerHTML="<font color='red'>用户格式不对</font>";             return false;         }else{            usernameerror.innerHTML="正确";             return true;         }      }     function checkpass(){         var pass=document.getElementById("pass");         var passerror=document.getElementById("passerror");         var passvalue=pass.value;         if(passvalue.length<6||passvalue.length>20){             passerror.innerHTML="<font color='red'>密码格式不对，必须介于6至20</font>";              return false;         }else{            passerror.innerHTML="正确";             return true;         }         }     function checkpass2(){         var pass=document.getElementById("pass");         var pass2=document.getElementById("pass2");         var pass2error=document.getElementById("pass2error");         var passvalue=pass.value;          var pass2value=pass2.value;         if(passvalue!=pass2value){             pass2error.innerHTML="<font color='red'>密码不一致</font>";              return false;         }else{            pass2error.innerHTML="正确";             return true;         }      }    function checkuseremail(){        var useremail=document.getElementById("useremail");         var useremailerror=document.getElementById("useremailerror");         var useremailvalue=useremail.value;         //liubao@tom.com           //js  /正则表达式/         var reg=/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;         if(!reg.test(useremailvalue)){             useremailerror.innerHTML="<font color='red'>邮箱格式不对</font>";             return false;         }else{            useremailerror.innerHTML="正确";            return true;         }    } </script>

现在只是验证提示，发现验证不过关还是网页还是会提交的，所以需要为这个form表单也绑定事件。

<form action="doregisert.jsp" id="formsub" onsubmit="return formsub()">

注意这里需要在onsubmit前面加上return。对应的js函数的实现    

 

function formsub(){       if(checkusername()&checkpass()&checkpass2()&checkuseremail()){            return true;       }else{           return  false;       }    }

效果如下：