表单验证

前端表单验证就是在 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.前端注册表单验证 && 表单回填的更多相关文章

  1. Oracle 删表前验证表名是否存在并且删除

    DECLARE num NUMBER; BEGIN SELECT COUNT(1) INTO num FROM USER_TABLES WHERE TABLE_NAME = UPPER('tableN ...

  2. JavaScript---网络编程(12)--DHTML技术演示(5)-form表单验证技术(正则)

    这里不进行很复杂的后台验证以及JavaScript的正则表达式,只是简单的介绍下这个技术,简单的后台接收与跳转,大概了解怎么验证的就可以.具体的技术,我后面还会继续写博客的.本人也还在学习中. 表单验 ...

  3. 用 jQuery 实现表单验证（摘抄）

    ——选自<锋利的jQuery>(第2版)第5章的例题  5.1.5 表单验证 表单作为 HTML 最重要的一个组成部分,几乎在每个网页上都有体现,例如用户提交信息.用户反馈信息和用户查询信 ...

  4. angular学习笔记(二十)-表单验证

    本篇主要介绍angular中的表单验证: 表单验证主要有以下一些内容: 1. required指令: 相当于html5的required属性,验证不能为空 2. ng-maxlength属性: 验证内 ...

  5. 用 jQuery 实现表单验证（转载）

    jQuery 官方 API 地址: http://api.jquery.com/ 在线引用 jQuery:http://code.jquery.com/ ——选自<锋利的jQuery>(第 ...

  6. 用 jQuery 实现表单验证（摘抄）——选自《锋利的jQuery》（第2版）第5章的例题 5.1.5 表单验证

    5.1.5 表单验证 表单(form)作为 HTML 最重要的一个组成部分,几乎在每个网页上都有体现,例如用户提交信息.用户反馈信息和用户查询信息等,因此它是网站管理者与浏览者之间沟通的桥梁.在表单中 ...

  7. validate表单验证插件

    1.引入validate.js包 <script src="xx/xx/jquery.validate.min.js"></script> 2.表单验证 / ...

  8. 第三百一十一节，Django框架，Form表单验证

    第三百一十一节,Django框架,Form表单验证 表单提交 html <!DOCTYPE html> <html lang="en"> <head& ...

  9. MiniUI官方表单验证示例

    原文地址:http://www.miniui.com/docs/tutorial/validator.html 表单验证 参考示例: 验证规则     表单验证     表单验证:文本提示     表 ...

随机推荐

  1. 数据集永久字段的Visble 属性为何不起作用

    ADOTable,永久字段,已经将visible属性设置为false,设计期,打开数据集,该字段是隐藏了,但是运行时还是显示的!! 原因是,之前持久化了 DBGRID的Coumns,FORM创建又读取 ...

  2. 冒泡排序(Bubble Sort)，比较次数优化改进

    body, table{font-family: 微软雅黑; font-size: 13.5pt} table{border-collapse: collapse; border: solid gra ...

  3. SharePoint 解决方案和功能-PowerShell

    1. 添加解决方案到SharePoint场 Add-SPSolution "c:\newsolution.wsp" 2. 获取场中的解决方案 Get-SPSolution 3. 获 ...

  4. SWIFT推送之本地推送(UILocalNotification)之二带按钮的消息

    上一篇讲到的本地推送是普通的消息推送,本篇要讲一下带按钮动作的推送消息,先上个图瞅瞅: 继上一篇的内容进行小小的改动: 在didFinishLaunchingWithOptions方法内进行以下修改 ...

  5. I.MX6 make menuconfig OTG to slave only mode

    /****************************************************************************** * I.MX6 make menucon ...

  6. How to convert int [12] to array<int, 12>

    code: // array::data #include <iostream> #include <cstring> #include <array> int m ...

  7. top command-linux下用top命令查看cpu利用率超过100%

    1.  这里显示的所有的cpu加起来的使用率,说明你的CPU是多核,你运行top后按大键盘1看看,可以显示每个cpu的使用率,top里显示的是把所有使用率加起来;    2.查看CPU信息; cat ...

  8. HPU 第三次积分赛：阶乘之和（水题）

    阶乘之和 描述 对于整数pp,给出以下定义 p=x_{1}!+x_{2}!+x_{3}!+...+x_{q}!(x_{i}<x_{j}for\ all\ i<j )p=x1​!+x2​!+ ...

  9. 结构体：HASH表模板

    这种 HASHMAP 就是一个链式前向星的表: 其中: init 函数:hashmap 创建初始化: check 函数:寻找 hash 表中是否有需要查找的值,若有则返回 1 ,否则返回 0 :遍历方 ...

  10. java8 array、list操作 汇【2】）- （Function,Consumer,Predicate,Supplier）应用

    static class UserT { String name; public UserT(String zm) { this.name=zm; } public String getName() ...