表单验证

前端表单验证就是在 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. POJ 1007 DNA sorting (关于字符串和排序的水题）

    #include<iostream>//写字符串的题目可以用这种方式:str[i][j] &str[i] using namespace std; int main() {int ...

  2. 浅谈：从为什么学习python到如何学好python

    虽然目前的编程语言有很多,但是基础语法上的概念,本质上都是相通的.可以做到一通百通.所以没有必要为了学哪门语言纠结太多. python是目前市面上,我个人认为是最简洁&&最优雅& ...

  3. Wii Party U 游戏简介

  4. 关于send message 函数

    Windows是一个消息驱动模式的系统,SendMessage 是应用程序和应用程序之间进行消息传递的主要手段之一.由于 SendMessage 函数的参数选项过于繁多,因此很有必要作一个汇总,分门别 ...

  5. java.lang.NoClassDefFoundError: Could not initialize class org.jfree.chart.JFreeChart

    最近在进行利用jfreechart生成图表时发现,项目在本地运行的好好的,一部署到服务器(linux系统)上就不行,报这样的错误: java.lang.NoClassDefFoundError: Co ...

  6. 多种数据库之间的同步工具SymmetricDS

    代码:https://github.com/JumpMind/symmetric-ds 原理: 通过触发器模式同步时,是将数据库的变化记录到某个系统表中,然后在客户端建立缓冲,并定期将变化push到接 ...

  7. ES6.0 Generator 三种用法

    // Generator start ------- thunk 用法 const Thunk = function(fn) { return function (...args) { return ...

  8. 7.3 5种IO模型与IO复用

    5种IO模型分别如下: 1.阻塞IO模型 当上层应用app1调用recv系统调用时,如果对等方没有发送数据(缓冲区没有数据),上层app1将阻塞(默认行为,被linux内核阻塞). 当对等方发送了数据 ...

  9. Stack Overflow 2016年度 20个最佳Python问题（一）

    Stack Overflow 2016年度 20个最佳Python问题(一) https://zhuanlan.zhihu.com/p/25020763

  10. POJ 3253 Fence Repair STL 优先队列

    这题做完后觉得很水,主要的想法就是逆过程思考,原题是截断,可以想成是拼装,一共有n根木棍,最后要拼成一根完整的,每两根小的拼成一根大的,拼成后的木棍长度就是费用,要求费用最少.显然的是一共会拼接n-1 ...