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

巴特西

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

表单验证

表单回填

最新文章

热门文章