Javascript（五）javascript实现表单验证

Myth丶恋晨 2022-05-17 03:00 248阅读 0赞

# 表单验证 #

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

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

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

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

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

实现验证验证方法：

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

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

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

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td> &nbsp;&nbsp;&nbsp;function formsub(){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(checkusername()&amp;checkpass()&amp;checkpass2()&amp;checkuseremail()){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return true; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}else{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return &nbsp;false; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;} </td> 
 </tr> 
 </tbody> 
</table>

效果如下：

![70][]

[70]: /images/20220517/4e37acbeb680425baa3ce4de211d9e5f.png