这里是简单的前端校验,后边还会介绍后台的校验。
多重校验保证获取安全数据
步骤:
1.确定事件onsubmit,并绑定函数
2.编写函数,作用是获取输入数据
3.判断数据是否合法,合法则提交,否则表单不提交
HTML代码:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <table> <!--3.注册表单--> <tr> <!--嵌套一个十行二列的表格--> <form action="#" method="get" name="regForm" onsubmit="return checkForm()"> <table border="1px" width="750px" height="400px" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white"> <tr height="40px"> <td colspan="2"> <font size="4">会员注册</font> USER REGISTER </td> </tr> <tr> <td> 用户名 </td> <td> <input type="text" name="user" size="34px" id="user" /> </td> </tr> <tr> <td> 密码 </td> <td> <input type="password" name="password" size="34px" id="password" /> </td> </tr> <tr> <td> 确认密码 </td> <td> <input type="password" name="repassword" size="34px" id="repassword"></input> </td> </tr> <tr> <td> Emaile </td> <td> <input type="text" name="email" size="34px" id="eamil" /> </td> </tr> <tr> <td> 姓名 </td> <td> <input type="text" name="username" size="34px" /> </td> </tr> <tr> <td> 性别 </td> <td> <input type="radio" name="sex" value="男" />男 <input type="radio" name="sex" value="女" />女 </td> </tr> <tr> <td> 出生日期 </td> <td> <input type="text" name="birthday" size="34px" /> </td> </tr> <tr> <td> 验证码 </td> <td> <input type="text" name="yzm" /> </td> </tr> <tr> <td colspan="2"> <input type="submit" value="注册" /> </td> </tr> </table> </form> </td> </tr> </table> </body> </html>
效果:
JS代码:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<script> function checkForm() { /**校验用户名*/ //1.获取用户输入的数据 var uValue = document.getElementById("user").value; //alert(uValue); if(uValue == "") { //2.给出错误提示信息 alert("用户名不能为空!"); return false; } /*校验密码*/ var pValue = document.getElementById("password").value; if(pValue == "") { alert("密码不能为空!"); return false; } /**校验确认密码*/ var rpValue = document.getElementById("repassword").value; if(rpValue != pValue) { alert("两次密码输入不一致!"); return false; } /*校验邮箱*/ var eValue = document.getElementById("eamil").value; if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(eValue)) { alert("邮箱格式不正确!"); return false; } } </script>
然而这种方式很low,用户希望的是验证信息出现在输入框的后边,并且随着输入而随时验证
这里会用到onfocus、onblur事件
HTML代码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> function showTips(id, info) { document.getElementById(id + "span").innerHTML = "<font color='gray'>" + info + "</font>"; } function check(id, info) { //1.获取用户输入的用户名数据 var uValue = document.getElementById(id).value; //2.进行校验 if(uValue == "") { document.getElementById(id + "span").innerHTML = "<font color='red'>" + info + "</font>"; } else { document.getElementById(id + "span").innerHTML = ""; } } </script> </head> <body> <form action="#" method="get" name="regForm" onsubmit="return checkForm()"> <table border="1px" width="750px" height="400px" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white"> <tr height="40px"> <td colspan="2"> <font size="4">会员注册</font> USER REGISTER </td> </tr> <tr> <td> 用户名 </td> <td> <input type="text" name="user" size="34px" id="user" onfocus="showTips('user','用户名必填!')" onblur="check('user','用户名不能为空!')" /><span id="userspan"></span> </td> </tr> <tr> <td> 密码 </td> <td> <input type="password" name="password" size="34px" id="password" onfocus="showTips('password','密码必填')" onblur="check('password','密码不能为空!')" /><span id="passwordspan"></span> </td> </tr> <tr> <td> 确认密码 </td> <td> <input type="password" name="repassword" size="34px" id="repassword"></input> </td> </tr> <tr> <td> Emaile </td> <td> <input type="text" name="email" size="34px" id="eamil" /> </td> </tr> <tr> <td> 姓名 </td> <td> <input type="text" name="username" size="34px" /> </td> </tr> <tr> <td> 性别 </td> <td> <input type="radio" name="sex" value="男" />男 <input type="radio" name="sex" value="女" />女 </td> </tr> <tr> <td> 出生日期 </td> <td> <input type="text" name="birthday" size="34px" /> </td> </tr> <tr> <td> 验证码 </td> <td> <input type="text" name="yzm" /> </td> </tr> <tr> <td colspan="2"> <input type="submit" value="注册" /> </td> </tr> </table> </form> </body> </html>
效果: