4.前端注册表单验证 && 表单回填

表单验证

前端表单验证就是在 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

<%@ 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>

regist.jsp