表单校验
来源：互联网 发布：控制算法工程师面试题 编辑：程序博客网 时间：2024/05/16 07:14
用户在登录之前需要先进行注册，在首页中点击“注册”链接就可以到达注册页面。
<%@ 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); }}阅读全文
0 0
- 表单校验
- 表单校验
- 表单校验
- 表单校验
- 表单校验
- 表单校验
- 表单校验
- 表单校验
- 表单校验
- 表单校验
- 表单校验
- 表单校验
- 表单校验
- 表单校验
- 表单校验
- 表单校验
- 表单校验
- angular表单校验-模板驱动表单校验
- 我的电路初步
- 编译Invalid GBK character "\xE5" on line 2
- hibernate 一对多 多对一 关系表 增删改查大礼包ps二级查也有
- 提升测试效率和质量
- 10. 创建一个带有灯光且通过鼠标左键可以触发效果的密室案例（带火焰音效）
- 表单校验
- mybatis 联合查询2
- CF891E，奇妙的计数题
- 斐波那契数列 python实现
- 设计模式--结构型
- 摩尔定律
- 在QTableView里调整显示效果的方法
- 网易2018校园招聘：游历魔法王国 [python]
- Python 数据处理实践（1）--文件读取
