表单验证
前端表单验证就是在 jsp 页面中添加验证逻辑,使得注册表单在传入后台之前先进行一次表单验证
在jsp文件里的 head 块里面添加 jQuery 代码
<script type="text/javascript" src="/js/jquery-1.4.2.js"></script> <script type="text/javascript"> var formObj={ "checkForm":function(){ // 1.非空验证 var flag=true; // 控制表单的变量,默认为true flag=this.checkNull("username","用户名不能为空") && flag; flag=this.checkNull("password","密码不能为空") && flag; flag=this.checkNull("password2","确认密码不能为空") && flag; flag=this.checkNull("nickname","昵称不能为空") && flag; // 2.密码一致验证 flag=this.checkPassword("password","两次密码应该一致") && flag; // 3.邮箱格式验证 flag=this.checkEmail("email","邮箱格式不正确") && flag; return flag; }, "checkemail":function(name,msg){ var email=$("input[name='"+name+"']").val(); // 当邮箱的值不为空串时再进行格式判断 if($.trim(email) != ""){ // 123@163.com.cn var reg=/^\w+@\w+(\.\w+)+$/; if(!reg.test(email)){ // 设置错误提示信息 this.setMsg(name, msg); return false; }else{ // 设置清空之前添加的错误信息 this.setMsg(name,""); return true; } } return false; }, "checkPassword":function(name,msg){ var psd1=$("input[name='password']").val(); var psd2=$("input[nmae='password2']").val(); if($.trim(psd1)!=""&&$.trim(psd2)!=""){ if(psd1!=psd2){ // 添加错误提示信息 this.setMsg(name+"2",msg); return false; }else{ // 清空之前添加的错误提示信息 this.setMsg(name+"2",""); return true; } } return false; }, "checkNull":function(name,msg){ // 用来判断input值是否为null的方法 // 拿到对应的input框的值 var value=$("input[name='"+name+"']").val(); // 判断是否为空 if($.trim(value)==""){ // 如果为空,则调用设置消息的方法,将错误信息显示在input的后面 this.setMsg(name,msg); // 表单不应该提交 return false; }else{ // 将之前添加的错误提示信息清空 this.setMsg(name, ""); // 表单可以提交 return true; } }, "setMsg":function(name,msg){ // 获取name指定的input后面的span,然后将传入的错误信息显示在span内部 $("input[name='"+name+"']").nextAll("span").html(msg).css("color","red"); } }; </script>
当用户点击注册的时候,前台会先进行一次表单验证
<!-- action:请求的路径 ,method:请求方式 --> <form action="/RegistServlet" method="POST" onSubmit="return formObj.checkForm()" >
表单回填
在用户填错注册信息之后,点击注册按钮,注册不成功,此时会自动将用户已经填写的信息重新填写到表单里,提升用户体验
<tr><!-- 如果出现错误将在表单顶部显示 --> <td colspan="2" style="text-align:center;color:green"> <%=request.getAttribute("errMsg")==null?"":request.getAttribute("errMsg") %> </td> </tr> <tr> <td class="tds">用户名:</td> <td> <!-- 回填 --> <input type="text" name="username" value="<%=request.getParameter("username")==null?"":request.getParameter("username") %>"/> <span></span> </td> </tr> <tr> <td class="tds">密码:</td> <td> <input type="password" name="password" value="<%=request.getParameter("password")==null?"":request.getParameter("password") %>"/> <span></span> </td> </tr> <tr> <td class="tds">确认密码:</td> <td> <input type="password" name="password2" value="<%=request.getParameter("password2")==null?"":request.getParameter("password2") %>"/> <span></span> </td> </tr> <tr> <td class="tds">昵称:</td> <td> <input type="text" name="nickname" value="<%=request.getParameter("nickname")==null?"":request.getParameter("nickname") %>"/> <span></span> </td> </tr> <tr> <td class="tds">邮箱:</td> <td> <input type="text" name="email" value="<%=request.getParameter("email")==null?"":request.getParameter("email") %>"/> <span></span> </td> </tr> <tr> <td class="tds">验证码:</td> <td> <input type="text" name="valistr"/> <img src="img/regist/yzm.jpg" width="" height="" alt="" /> </td> </tr> <tr> <td class="sub_td" colspan="2" class="tds"> <input type="submit" value="注册用户"/> </td> </tr>
完整的 regist.jsp
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <!DOCTYPE HTML> <html> <head> <title>欢迎注册BinGou</title> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" href="css/regist.css"/> <script type="text/javascript" src="/js/jquery-1.4.2.js"></script> <script type="text/javascript"> var formObj={ "checkForm":function(){ // 1.非空验证 var flag=true; // 控制表单的变量,默认为true flag=this.checkNull("username","用户名不能为空") && flag; flag=this.checkNull("password","密码不能为空") && flag; flag=this.checkNull("password2","确认密码不能为空") && flag; flag=this.checkNull("nickname","昵称不能为空") && flag; // 2.密码一致验证 flag=this.checkPassword("password","两次密码应该一致") && flag; // 3.邮箱格式验证 flag=this.checkEmail("email","邮箱格式不正确") && flag; return flag; }, "checkemail":function(name,msg){ var email=$("input[name='"+name+"']").val(); // 当邮箱的值不为空串时再进行格式判断 if($.trim(email) != ""){ // 123@163.com.cn var reg=/^\w+@\w+(\.\w+)+$/; if(!reg.test(email)){ // 设置错误提示信息 this.setMsg(name, msg); return false; }else{ // 设置清空之前添加的错误信息 this.setMsg(name,""); return true; } } return false; }, "checkPassword":function(name,msg){ var psd1=$("input[name='password']").val(); var psd2=$("input[nmae='password2']").val(); if($.trim(psd1)!=""&&$.trim(psd2)!=""){ if(psd1!=psd2){ // 添加错误提示信息 this.setMsg(name+"2",msg); return false; }else{ // 清空之前添加的错误提示信息 this.setMsg(name+"2",""); return true; } } return false; }, "checkNull":function(name,msg){ // 用来判断input值是否为null的方法 // 拿到对应的input框的值 var value=$("input[name='"+name+"']").val(); // 判断是否为空 if($.trim(value)==""){ // 如果为空,则调用设置消息的方法,将错误信息显示在input的后面 this.setMsg(name,msg); // 表单不应该提交 return false; }else{ // 将之前添加的错误提示信息清空 this.setMsg(name, ""); // 表单可以提交 return true; } }, "setMsg":function(name,msg){ // 获取name指定的input后面的span,然后将传入的错误信息显示在span内部 $("input[name='"+name+"']").nextAll("span").html(msg).css("color","red"); } }; </script> </head> <body> <!-- action:请求的路径 ,method:请求方式 --> <form action="/RegistServlet" method="POST" onSubmit="return formObj.checkForm()" > <h1>欢迎注册BinGou</h1> <table> <tr><!-- 如果出现错误将在表单顶部显示 --> <td colspan="2" style="text-align:center;color:green"> <%=request.getAttribute("errMsg")==null?"":request.getAttribute("errMsg") %> </td> </tr> <tr> <td class="tds">用户名:</td> <td> <!-- 回填 --> <input type="text" name="username" value="<%=request.getParameter("username")==null?"":request.getParameter("username") %>"/> <span></span> </td> </tr> <tr> <td class="tds">密码:</td> <td> <input type="password" name="password" value="<%=request.getParameter("password")==null?"":request.getParameter("password") %>"/> <span></span> </td> </tr> <tr> <td class="tds">确认密码:</td> <td> <input type="password" name="password2" value="<%=request.getParameter("password2")==null?"":request.getParameter("password2") %>"/> <span></span> </td> </tr> <tr> <td class="tds">昵称:</td> <td> <input type="text" name="nickname" value="<%=request.getParameter("nickname")==null?"":request.getParameter("nickname") %>"/> <span></span> </td> </tr> <tr> <td class="tds">邮箱:</td> <td> <input type="text" name="email" value="<%=request.getParameter("email")==null?"":request.getParameter("email") %>"/> <span></span> </td> </tr> <tr> <td class="tds">验证码:</td> <td> <input type="text" name="valistr"/> <img src="img/regist/yzm.jpg" width="" height="" alt="" /> </td> </tr> <tr> <td class="sub_td" colspan="2" class="tds"> <input type="submit" value="注册用户"/> </td> </tr> </table> </form> </body> </html>