表单校验-CSDN博客

用户在登录之前需要先进行注册，在首页中点击“注册”链接就可以到达注册页面。

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>

    <title>注册</title>

    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
    <link rel="stylesheet" type="text/css" href="<c:url value='/jsps/css/user/regist.css'/>"/>
    <script type="text/javascript" src="<c:url value='/jquery/jquery-1.5.1.js'/>"></script>
    <script type="text/javascript" src="<c:url value='/jsps/js/user/regist.js'/>"></script> 
  </head>

  <body>
  <div id="divMain">
    <div id="divTitle">
        <span id="spanTitle">新用户注册</span>
    </div>
    <div id="divBody">
    <form id="registForm" action="<c:url value='/UserServlet'/>" method="post">
        <input type="hidden" name="method" value="regist"/>
        <table id="tableForm" >
            <tr >
                <td class="tdText">用户名：</td>
                <td class="tdInput">
                    <input class="inputClass" type="text" name="loginname" id="loginname" value="${form.loginname }"/>
                </td>
                <td class="tdError">
                    <label class="errorClass" id="loginnameError">${errors.loginname }</label>
                </td>
            </tr>
            <tr>
                <td class="tdText">登录密码：</td>
                <td>
                    <input class="inputClass" type="password" name="loginpass" id="loginpass" value="${form.loginpass }"/>
                </td>
                <td>
                    <label  class="errorClass" id="loginpassError">${errors.loginpass }</label>
                </td>
            </tr>
            <tr>
                <td class="tdText">确认密码：</td>
                <td>
                    <input class="inputClass" type="password" name="reloginpass" id="reloginpass" value="${form.reloginpass}"/>
                </td>
                <td>
                    <label class="errorClass" id="reloginpassError">${errors.reloginpass }</label>
                </td>
            </tr>
            <tr>
                <td class="tdText">Email：</td>
                <td>
                    <input class="inputClass" type="text" name="email" id="email" value="${form.email }"/>
                </td>
                <td>
                    <label class="errorClass" id="emailError">${errors.email }</label>
                </td>
            </tr>

            <tr>
                <td class="tdText">验证码：</td>
                <td>
                    <input class="inputClass" type="text" name="verifyCode" id="verifyCode" value="${form.verifyCode }"/>
                </td>
                <td>
                    <label  class="errorClass" id="verifyCodeError">${errors.verifyCode }</label>
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <div id="divVerifyCode"><img id="imgVerifyCode" src="<c:url value='/VerifyCodeServlet'/>"></div>
                </td>
                <td>
                    <label><a href="javascript:_hyz()">换一张</a></label>
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <input class="inputClass" type="image" src="<c:url value='/images/regist1.jpg'/>" id="submitBtn"/>
                </td>
                <td>
                    <label></label>
                </td>
            </tr>
        </table>
    </form>
    </div>
  </div>
  </body>
</html>

表单校验
注册页面使用JQuery对用户输入的数据进行校验：
用户名：
 不能为空；
 长度必须在2~15之间；
 不能是已注册过的；
登录密码：
 不能为空；
 长度必须在2~15之间；
确认密码：
 不能为空；
 必须与登录密码相同；
Email：
 不能为空；
 必须是正确的Email格式；
 不能是注册过的Email；
验证码：
 不能为空；
 必须与图片上的验证码相同。

　　表单校验中，用户名是否被注册过、Email是否被注册过、验证码是否正确这三项都需要请求服务器，所以这里使用的是JQuery的ajax()来完成对服务器的访问。

$(function() {
    /*
     * 1. 得到所有的错误信息，循环遍历之。调用一个方法来确定是否显示错误信息！
     */
    $(".errorClass").each(function() {
        showError($(this));//遍历每个元素，使用每个元素来调用showError方法
    });

    /*
     * 2. 切换注册按钮的图片
     */
    $("#submitBtn").hover(
        function() {
            $("#submitBtn").attr("src", "/goods/images/regist2.jpg");
        },
        function() {
            $("#submitBtn").attr("src", "/goods/images/regist1.jpg");
        }
    );

    /*
     * 3. 输入框得到焦点隐藏错误信息
     */
    $(".inputClass").focus(function() {
        var labelId = $(this).attr("id") + "Error";//通过输入框找到对应的label的id
        $("#" + labelId).text("");//把label的内容清空！
        showError($("#" + labelId));//隐藏没有信息的label
    });

    /*
     * 4. 输入框失去焦点进行校验
     */
    $(".inputClass").blur(function() {
        var id = $(this).attr("id");//获取当前输入框的id
        var funName = "validate" + id.substring(0,1).toUpperCase() + id.substring(1) + "()";//得到对应的校验函数名
        eval(funName);//执行函数调用
    });

    /*
     * 5. 表单提交时进行校验
     */
    $("#registForm").submit(function() {
        var bool = true;//表示校验通过
        if(!validateLoginname()) {
            bool = false;
        }
        if(!validateLoginpass()) {
            bool = false;
        }
        if(!validateReloginpass()) {
            bool = false;
        }
        if(!validateEmail()) {
            bool = false;
        }
        if(!validateVerifyCode()) {
            bool = false;
        }
        return bool;
    });
});

/*
 * 登录名校验方法
 */
function validateLoginname() {
    var id = "loginname";
    var value = $("#" + id).val();//获取输入框内容
    /*
     * 1. 非空校验
     */
    if(!value) {
        /*
         * 获取对应的label
         * 添加错误信息
         * 显示label
         */
        $("#" + id + "Error").text("用户名不能为空！");
        showError($("#" + id + "Error"));
        return false;
    }
    /*
     * 2. 长度校验
     */
    if(value.length < 3 || value.length > 20) {
        /*
         * 获取对应的label
         * 添加错误信息
         * 显示label
         */
        $("#" + id + "Error").text("用户名长度必须在3 ~ 20之间！");
        showError($("#" + id + "Error"));
        false;
    }
    /*
     * 3. 是否注册校验
     */
    $.ajax({
        url:"/goods/UserServlet",//要请求的servlet
        data:{method:"ajaxValidateLoginname", loginname:value},//给服务器的参数
        type:"POST",
        dataType:"json",
        async:false,//是否异步请求，如果是异步，那么不会等服务器返回，我们这个函数就向下运行了。
        cache:false,
        success:function(result) {
            if(!result) {//如果校验失败
                $("#" + id + "Error").text("用户名已被注册！");
                showError($("#" + id + "Error"));
                return false;
            }
        }
    });
    return true;
}

/*
 * 登录密码校验方法
 */
function validateLoginpass() {
    var id = "loginpass";
    var value = $("#" + id).val();//获取输入框内容
    /*
     * 1. 非空校验
     */
    if(!value) {
        /*
         * 获取对应的label
         * 添加错误信息
         * 显示label
         */
        $("#" + id + "Error").text("密码不能为空！");
        showError($("#" + id + "Error"));
        return false;
    }
    /*
     * 2. 长度校验
     */
    if(value.length < 3 || value.length > 20) {
        /*
         * 获取对应的label
         * 添加错误信息
         * 显示label
         */
        $("#" + id + "Error").text("密码长度必须在3 ~ 20之间！");
        showError($("#" + id + "Error"));
        false;
    }
    return true;    
}

/*
 * 确认密码校验方法
 */
function validateReloginpass() {
    var id = "reloginpass";
    var value = $("#" + id).val();//获取输入框内容
    /*
     * 1. 非空校验
     */
    if(!value) {
        /*
         * 获取对应的label
         * 添加错误信息
         * 显示label
         */
        $("#" + id + "Error").text("确认密码不能为空！");
        showError($("#" + id + "Error"));
        return false;
    }
    /*
     * 2. 两次输入是否一致校验
     */
    if(value != $("#loginpass").val()) {
        /*
         * 获取对应的label
         * 添加错误信息
         * 显示label
         */
        $("#" + id + "Error").text("两次输入不一致！");
        showError($("#" + id + "Error"));
        false;
    }
    return true;    
}

/*
 * Email校验方法
 */
function validateEmail() {
    var id = "email";
    var value = $("#" + id).val();//获取输入框内容
    /*
     * 1. 非空校验
     */
    if(!value) {
        /*
         * 获取对应的label
         * 添加错误信息
         * 显示label
         */
        $("#" + id + "Error").text("Email不能为空！");
        showError($("#" + id + "Error"));
        return false;
    }
    /*
     * 2. Email格式校验
     */
    if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(value)) {
        /*
         * 获取对应的label
         * 添加错误信息
         * 显示label
         */
        $("#" + id + "Error").text("错误的Email格式！");
        showError($("#" + id + "Error"));
        false;
    }
    /*
     * 3. 是否注册校验
     */
    $.ajax({
        url:"/goods/UserServlet",//要请求的servlet
        data:{method:"ajaxValidateEmail", email:value},//给服务器的参数
        type:"POST",
        dataType:"json",
        async:false,//是否异步请求，如果是异步，那么不会等服务器返回，我们这个函数就向下运行了。
        cache:false,
        success:function(result) {
            if(!result) {//如果校验失败
                $("#" + id + "Error").text("Email已被注册！");
                showError($("#" + id + "Error"));
                return false;
            }
        }
    });
    return true;        
}

/*
 * 验证码校验方法
 */
function validateVerifyCode() {
    var id = "verifyCode";
    var value = $("#" + id).val();//获取输入框内容
    /*
     * 1. 非空校验
     */
    if(!value) {
        /*
         * 获取对应的label
         * 添加错误信息
         * 显示label
         */
        $("#" + id + "Error").text("验证码不能为空！");
        showError($("#" + id + "Error"));
        return false;
    }
    /*
     * 2. 长度校验
     */
    if(value.length != 4) {
        /*
         * 获取对应的label
         * 添加错误信息
         * 显示label
         */
        $("#" + id + "Error").text("错误的验证码！");
        showError($("#" + id + "Error"));
        false;
    }
    /*
     * 3. 是否正确
     */
    $.ajax({
        url:"/goods/UserServlet",//要请求的servlet
        data:{method:"ajaxValidateVerifyCode", verifyCode:value},//给服务器的参数
        type:"POST",
        dataType:"json",
        async:false,//是否异步请求，如果是异步，那么不会等服务器返回，我们这个函数就向下运行了。
        cache:false,
        success:function(result) {
            if(!result) {//如果校验失败
                $("#" + id + "Error").text("验证码错误！");
                showError($("#" + id + "Error"));
                return false;
            }
        }
    });
    return true;        
}

/*
 * 判断当前元素是否存在内容，如果存在显示，不页面不显示！
 */
function showError(ele) {
    var text = ele.text();//获取元素的内容
    if(!text) {//如果没有内容
        ele.css("display", "none");//隐藏元素
    } else {//如果有内容
        ele.css("display", "");//显示元素
    }
}

/*
 * 换一张验证码
 */
function _hyz() {
    /*
     * 1. 获取<img>元素
     * 2. 重新设置它的src
     * 3. 使用毫秒来添加参数
     */
    $("#imgVerifyCode").attr("src", "/goods/VerifyCodeServlet?a=" + new Date().getTime());
}

服务器端的响应与校验：

/**
 * 用户模块WEB层
 * @author qdmmy6
 *
 */
public class UserServlet extends BaseServlet {
    private UserService userService = new UserService();

    /**
     * ajax用户名是否注册校验
     * @param req
     * @param resp
     * @return
     * @throws ServletException
     * @throws IOException
     */
    public String ajaxValidateLoginname(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException {
        /*
         * 1. 获取用户名
         */
        String loginname = req.getParameter("loginname");
        /*
         * 2. 通过service得到校验结果
         */
        boolean b = userService.ajaxValidateLoginname(loginname);
        /*
         * 3. 发给客户端
         */

        resp.getWriter().print(b);
        return null;
    }

    /**
     * ajax Email是否注册校验
     * @param req
     * @param resp
     * @return
     * @throws ServletException
     * @throws IOException
     */
    public String ajaxValidateEmail(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException {
        /*
         * 1. 获取Email
         */
        String email = req.getParameter("email");
        /*
         * 2. 通过service得到校验结果
         */
        boolean b = userService.ajaxValidateEmail(email);
        /*
         * 3. 发给客户端
         */
        resp.getWriter().print(b);
        return null;
    }

    /**
     * ajax验证码是否正确校验
     * @param req
     * @param resp
     * @return
     * @throws ServletException
     * @throws IOException
     */
    public String ajaxValidateVerifyCode(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException {
        /*
         * 1. 获取输入框中的验证码
         */
        String verifyCode = req.getParameter("verifyCode");
        /*
         * 2. 获取图片上真实的校验码
         */
        String vcode = (String) req.getSession().getAttribute("vCode");
        /*
         * 3. 进行忽略大小写比较，得到结果
         */
        boolean b = verifyCode.equalsIgnoreCase(vcode);
        /*
         * 4. 发送给客户端
         */
        resp.getWriter().print(b);
        return null;
    }

    /**
     * 注册功能
     * @param req
     * @param resp
     * @return
     * @throws ServletException
     * @throws IOException
     */
    public String regist(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException {
        /*
         * 1. 封装表单数据到User对象
         */
        User formUser = CommonUtils.toBean(req.getParameterMap(), User.class);
        /*
         * 2. 校验之, 如果校验失败，保存错误信息，返回到regist.jsp显示
         */
        Map<String,String> errors = validateRegist(formUser, req.getSession());
        if(errors.size() > 0) {
            req.setAttribute("form", formUser);
            req.setAttribute("errors", errors);
            return "f:/jsps/user/regist.jsp";
        }
        /*
         * 3. 使用service完成业务
         */
        userService.regist(formUser);
        /*
         * 4. 保存成功信息，转发到msg.jsp显示！
         */
        req.setAttribute("code", "success");
        req.setAttribute("msg", "注册功能，请马上到邮箱激活！");
        return "f:/jsps/msg.jsp";
    }

    /*
     * 注册校验
     * 对表单的字段进行逐个校验，如果有错误，使用当前字段名称为key，错误信息为value，保存到map中
     * 返回map
     */
    private Map<String,String> validateRegist(User formUser, HttpSession session) {
        Map<String,String> errors = new HashMap<String,String>();
        /*
         * 1. 校验登录名
         */
        String loginname = formUser.getLoginname();
        if(loginname == null || loginname.trim().isEmpty()) {
            errors.put("loginname", "用户名不能为空！");
        } else if(loginname.length() < 3 || loginname.length() > 20) {
            errors.put("loginname", "用户名长度必须在3~20之间！");
        } else if(!userService.ajaxValidateLoginname(loginname)) {
            errors.put("loginname", "用户名已被注册！");
        }

        /*
         * 2. 校验登录密码
         */
        String loginpass = formUser.getLoginpass();
        if(loginpass == null || loginpass.trim().isEmpty()) {
            errors.put("loginpass", "密码不能为空！");
        } else if(loginpass.length() < 3 || loginpass.length() > 20) {
            errors.put("loginpass", "密码长度必须在3~20之间！");
        }

        /*
         * 3. 确认密码校验
         */
        String reloginpass = formUser.getReloginpass();
        if(reloginpass == null || reloginpass.trim().isEmpty()) {
            errors.put("reloginpass", "确认密码不能为空！");
        } else if(!reloginpass.equals(loginpass)) {
            errors.put("reloginpass", "两次输入不一致！");
        }

        /*
         * 4. 校验email
         */
        String email = formUser.getEmail();
        if(email == null || email.trim().isEmpty()) {
            errors.put("email", "Email不能为空！");
        } else if(!email.matches("^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\\.[a-zA-Z0-9_-]{2,3}){1,2})$")) {
            errors.put("email", "Email格式错误！");
        } else if(!userService.ajaxValidateEmail(email)) {
            errors.put("email", "Email已被注册！");
        }

        /*
         * 5. 验证码校验
         */
        String verifyCode = formUser.getVerifyCode();
        String vcode = (String) session.getAttribute("vCode");
        if(verifyCode == null || verifyCode.trim().isEmpty()) {
            errors.put("verifyCode", "验证码不能为空！");
        } else if(!verifyCode.equalsIgnoreCase(vcode)) {
            errors.put("verifyCode", "验证码错误！");
        }

        return errors;
    }
}

Service层：略。
Dao层：

/**
 * 用户模块持久层
 * @author qdmmy6
 *
 */
public class UserDao {
    private QueryRunner qr = new TxQueryRunner();

    /**
     * 校验用户名是否注册
     * @param loginname
     * @return
     * @throws SQLException
     */
    public boolean ajaxValidateLoginname(String loginname) throws SQLException{
        String sql="select count(1) from t_user where loginname=?";
        Number num=(Number) qr.query(sql, new ScalarHandler(),loginname);
        return num.intValue()==0;
    }
    /**
     * 检验Email是否注册
     * @throws SQLException 
     */
    public boolean ajaxValidateEmail(String email) throws SQLException{
        String sql="select count(1) from t_user where email=?";
        Number num=(Number) qr.query(sql, new ScalarHandler(),email);
        return num.intValue()==0;
    }
    /**
     * 用户注册
     * @param formUser 
     */
    public void regist(User user) throws SQLException {
        /*
         * 数据补齐
         */
        user.setUid(CommonUtils.uuid());
        user.setStatus(false);
        user.setActivationCode(CommonUtils.uuid()+CommonUtils.uuid());
        String sql="insert into t_user values(?,?,?,?,?,?)";
        Object[] params={user.getUid(),user.getLoginname(),user.getLoginpass()
                ,user.getEmail(),user.isStatus(),user.getActivationCode()};
        qr.update(sql, params);
    }

}

表单校验

“相关推荐”对你有帮助么？