Goods:注册页面之后台数据验证

别忘了在xml中配置UserServlet

regist.js

  1 $(function() {
  2     /*
  3      * 1. 得到所有的错误信息，循环遍历之。调用一个方法来确定是否显示错误信息！
  4      */
  5     $(".errorClass").each(function() {
  6         showError($(this));//遍历每个元素，使用每个元素来调用showError方法
  7     });
  8
  9     /*
 10      * 2. 切换注册按钮的图片
 11      */
 12     $("#submitBtn").hover(
 13         function() {
 14             $("#submitBtn").attr("src", "/goods/images/regist2.jpg");
 15         },
 16         function() {
 17             $("#submitBtn").attr("src", "/goods/images/regist1.jpg");
 18         }
 19     );
 20
 21     /*
 22      * 3. 输入框得到焦点隐藏错误信息
 23      */
 24     $(".inputClass").focus(function() {
 25         var labelId = $(this).attr("id") + "Error";//通过输入框找到对应的label的id
 26         $("#" + labelId).text("");//把label的内容清空！
 27         showError($("#" + labelId));//隐藏没有信息的label
 28     });
 29
 30     /*
 31      * 4. 输入框失去焦点进行校验
 32      */
 33     $(".inputClass").blur(function() {
 34         var id = $(this).attr("id");//获取当前输入框的id
 35         var funName = "validate" + id.substring(0,1).toUpperCase() + id.substring(1) + "()";//得到对应的校验函数名
 36         eval(funName);//执行函数调用
 37     });
 38
 39     /*
 40      * 5. 表单提交时进行校验
 41      */
 42     $("#registForm").submit(function() {
 43         var bool = true;//表示校验通过
 44         if(!validateLoginname()) {
 45             bool = false;
 46         }
 47         if(!validateLoginpass()) {
 48             bool = false;
 49         }
 50         if(!validateReloginpass()) {
 51             bool = false;
 52         }
 53         if(!validateEmail()) {
 54             bool = false;
 55         }
 56         if(!validateVerifyCode()) {
 57             bool = false;
 58         }
 59
 60         return bool;
 61     });
 62 });
 63
 64 /*
 65  * 登录名校验方法
 66  */
 67 function validateLoginname() {
 68     var id = "loginname";
 69     var value = $("#" + id).val();//获取输入框内容
 70     /*
 71      * 1. 非空校验
 72      */
 73     if(!value) {
 74         /*
 75          * 获取对应的label
 76          * 添加错误信息
 77          * 显示label
 78          */
 79         $("#" + id + "Error").text("用户名不能为空！");
 80         showError($("#" + id + "Error"));
 81         return false;
 82     }
 83     /*
 84      * 2. 长度校验
 85      */
 86     if(value.length < 3 || value.length > 20) {
 87         /*
 88          * 获取对应的label
 89          * 添加错误信息
 90          * 显示label
 91          */
 92         $("#" + id + "Error").text("用户名长度必须在3 ~ 20之间！");
 93         showError($("#" + id + "Error"));
 94         false;
 95     }
 96     /*
 97      * 3. 是否注册校验
 98      */
 99     $.ajax({
100         url:"/goods/UserServlet",//要请求的servlet
101         data:{method:"ajaxValidateLoginname", loginname:value},//给服务器的参数
102         type:"POST",
103         dataType:"json",
104         async:false,//是否异步请求，如果是异步，那么不会等服务器返回，我们这个函数就向下运行了。
105         cache:false,
106         success:function(result) {
107             if(!result) {//如果校验失败
108                 $("#" + id + "Error").text("用户名已被注册！");
109                 showError($("#" + id + "Error"));
110                 return false;
111             }
112         }
113     });
114     return true;
115 }
116
117 /*
118  * 登录密码校验方法
119  */
120 function validateLoginpass() {
121     var id = "loginpass";
122     var value = $("#" + id).val();//获取输入框内容
123     /*
124      * 1. 非空校验
125      */
126     if(!value) {
127         /*
128          * 获取对应的label
129          * 添加错误信息
130          * 显示label
131          */
132         $("#" + id + "Error").text("密码不能为空！");
133         showError($("#" + id + "Error"));
134         return false;
135     }
136     /*
137      * 2. 长度校验
138      */
139     if(value.length < 3 || value.length > 20) {
140         /*
141          * 获取对应的label
142          * 添加错误信息
143          * 显示label
144          */
145         $("#" + id + "Error").text("密码长度必须在3 ~ 20之间！");
146         showError($("#" + id + "Error"));
147         false;
148     }
149     return true;
150 }
151
152 /*
153  * 确认密码校验方法
154  */
155 function validateReloginpass() {
156     var id = "reloginpass";
157     var value = $("#" + id).val();//获取输入框内容
158     /*
159      * 1. 非空校验
160      */
161     if(!value) {
162         /*
163          * 获取对应的label
164          * 添加错误信息
165          * 显示label
166          */
167         $("#" + id + "Error").text("确认密码不能为空！");
168         showError($("#" + id + "Error"));
169         return false;
170     }
171     /*
172      * 2. 两次输入是否一致校验
173      */
174     if(value != $("#loginpass").val()) {
175         /*
176          * 获取对应的label
177          * 添加错误信息
178          * 显示label
179          */
180         $("#" + id + "Error").text("两次输入不一致！");
181         showError($("#" + id + "Error"));
182         false;
183     }
184     return true;
185 }
186
187 /*
188  * Email校验方法
189  */
190 function validateEmail() {
191     var id = "email";
192     var value = $("#" + id).val();//获取输入框内容
193     /*
194      * 1. 非空校验
195      */
196     if(!value) {
197         /*
198          * 获取对应的label
199          * 添加错误信息
200          * 显示label
201          */
202         $("#" + id + "Error").text("Email不能为空！");
203         showError($("#" + id + "Error"));
204         return false;
205     }
206     /*
207      * 2. Email格式校验
208      */
209     if(!/^([a-zA-Z0-9_-])[email protected]([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(value)) {
210         /*
211          * 获取对应的label
212          * 添加错误信息
213          * 显示label
214          */
215         $("#" + id + "Error").text("错误的Email格式！");
216         showError($("#" + id + "Error"));
217         false;
218     }
219     /*
220      * 3. 是否注册校验
221      */
222     $.ajax({
223         url:"/goods/UserServlet",//要请求的servlet
224         data:{method:"ajaxValidateEmail", email:value},//给服务器的参数
225         type:"POST",
226         dataType:"json",
227         async:false,//是否异步请求，如果是异步，那么不会等服务器返回，我们这个函数就向下运行了。
228         cache:false,
229         success:function(result) {
230             if(!result) {//如果校验失败
231                 $("#" + id + "Error").text("Email已被注册！");
232                 showError($("#" + id + "Error"));
233                 return false;
234             }
235         }
236     });
237     return true;
238 }
239
240 /*
241  * 验证码校验方法
242  */
243 function validateVerifyCode() {
244     var id = "verifyCode";
245     var value = $("#" + id).val();//获取输入框内容
246     /*
247      * 1. 非空校验
248      */
249     if(!value) {
250         /*
251          * 获取对应的label
252          * 添加错误信息
253          * 显示label
254          */
255         $("#" + id + "Error").text("验证码不能为空！");
256         showError($("#" + id + "Error"));
257         return false;
258     }
259     /*
260      * 2. 长度校验
261      */
262     if(value.length != 4) {
263         /*
264          * 获取对应的label
265          * 添加错误信息
266          * 显示label
267          */
268         $("#" + id + "Error").text("错误的验证码！");
269         showError($("#" + id + "Error"));
270         false;
271     }
272     /*
273      * 3. 是否正确
274      */
275     $.ajax({
276         url:"/goods/UserServlet",//要请求的servlet
277         data:{method:"ajaxValidateVerifyCode", verifyCode:value},//给服务器的参数
278         type:"POST",
279         dataType:"json",
280         async:false,//是否异步请求，如果是异步，那么不会等服务器返回，我们这个函数就向下运行了。
281         cache:false,
282         success:function(result) {
283             if(!result) {//如果校验失败
284                 $("#" + id + "Error").text("验证码错误！");
285                 showError($("#" + id + "Error"));
286                 return false;
287             }
288         }
289     });
290     return true;
291 }
292
293 /*
294  * 判断当前元素是否存在内容，如果存在显示，不页面不显示！
295  */
296 function showError(ele) {
297     var text = ele.text();//获取元素的内容
298     if(!text) {//如果没有内容
299         ele.css("display", "none");//隐藏元素
300     } else {//如果有内容
301         ele.css("display", "");//显示元素
302     }
303 }
304
305 /*
306  * 换一张验证码
307  */
308 function _hyz() {
309     /*
310      * 1. 获取<img>元素
311      * 2. 重新设置它的src
312      * 3. 使用毫秒来添加参数
313      */
314     $("#imgVerifyCode").attr("src", "/goods/VerifyCodeServlet?a=" + new Date().getTime());
315 }

UserServlet:

 1 package cn.itcast.goods.user.web.servlet;
 2
 3 import java.io.IOException;
 4
 5 import javax.servlet.ServletException;
 6 import javax.servlet.http.HttpServletRequest;
 7 import javax.servlet.http.HttpServletResponse;
 8
 9 import cn.itcast.goods.user.service.UserService;
10 import cn.itcast.servlet.BaseServlet;
11
12 /*
13  * 用户模块web层
14  */
15 public class UserServlet extends BaseServlet {
16     private UserService userService = new UserService();
17
18     // ajax 用戶名是否註冊校驗
19     public String ajaxValidateLoginname(HttpServletRequest req,
20             HttpServletResponse resp) throws ServletException, IOException {
21         // 獲取用戶名
22         String loginname = req.getParameter("loginname");
23         // 通過service獲取校驗結果
24         boolean b = userService.ajaxValidateLoginname(loginname);
25         System.out.println("ajaxValidateLoginname");
26         // 發給客戶端
27         resp.getWriter().print(b);
28
29         return null;
30     }
31
32     // ajax email是否註冊校驗
33     public String ajaxValidateEmail(HttpServletRequest req,
34             HttpServletResponse resp) throws ServletException, IOException {
35                // 獲取email
36                 String email = req.getParameter("email");
37                 // 通過service獲取校驗結果
38                 boolean b = userService.ajaxValidateLoginname(email);
39                 // 發給客戶端
40                 resp.getWriter().print(b);
41
42         return null;
43     }
44
45     public String ajaxValidateVerifyCode(HttpServletRequest req, HttpServletResponse resp)
46             throws ServletException, IOException {
47         /*
48          * 1. 获取输入框中的验证码
49          */
50         String verifyCode = req.getParameter("verifyCode");
51         /*
52          * 2. 获取图片上真实的校验码
53          */
54         String vcode = (String) req.getSession().getAttribute("vCode");
55         /*
56          * 3. 进行忽略大小写比较，得到结果
57          */
58         boolean b = verifyCode.equalsIgnoreCase(vcode);
59         /*
60          * 4. 发送给客户端
61          */
62         resp.getWriter().print(b);
63         return null;
64     }
65     // 注册功能
66     protected String regist(HttpServletRequest req, HttpServletResponse resp)
67             throws ServletException, IOException {
68
69         return null;
70     }
71 }

UserService

 1 package cn.itcast.goods.user.service;
 2
 3 import java.sql.SQLException;
 4
 5 import org.apache.commons.dbutils.handlers.ScalarHandler;
 6
 7 import cn.itcast.goods.user.dao.UserDao;
 8
 9 /*
10  * 用户模块 业务层
11  */
12 public class UserService {
13     private UserDao userDao=new UserDao();
14     //檢測loginname是否註冊
15     public boolean ajaxValidateLoginname(String loginname)  {
16         try {
17             return userDao.ajaxValidateLoginname(loginname);
18         } catch (SQLException e) {
19             //異常轉化 拋出re不會出錯
20             throw new RuntimeException(e);
21
22         }
23
24     }
25     //校驗email是否註冊
26     public boolean ajaxValidateEmail(String email){
27         try {
28             return userDao.ajaxValidateEmail(email);
29         } catch (SQLException e) {
30             // TODO Auto-generated catch block
31             //異常轉化 拋出re不會出錯
32             throw new RuntimeException(e);
33         }
34
35     }
36
37 }

UserDao

package cn.itcast.goods.user.dao;

import java.sql.SQLException;

import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.ScalarHandler;

import cn.itcast.jdbc.TxQueryRunner;

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

    //校驗用戶名是否註冊
    public boolean ajaxValidateLoginname(String loginname) throws SQLException{
        String sql="select count(1) from t_user where loginname=?";

            Number number=(Number) qr.query(sql, new ScalarHandler(),loginname);
            System.out.println("userdao:ajaxloginname");
            return number.intValue()==0;    

    }
    //校驗email是否註冊
    public boolean ajaxValidateEmail(String email) throws SQLException{
        String sql="select count(1) from t_user where email=?";

            Number number=(Number) qr.query(sql, new ScalarHandler(),email);
            return number.intValue()==0;    

    }
}

时间： 2024-10-11 18:38:51

Goods:注册页面之后台数据验证的相关文章

Asp.Net Mvc后台数据验证自测小Demo

*.这里只做后台数据验证,利用mvc数据验证标记验证数据,并获取错误信息提示后页面中. 1.实现效果如下: 2.model类 People.cs using System; using System.Collections.Generic; using System.ComponentModel.DataAnnotations; using System.Linq; using System.Web; namespace WebTest.Areas.Validation.Models { pub

Ecshop实现注册页面手机号唯一的验证

前天,公司总监提了一个需求,实现我公司商城注册会员用手机号登录这个功能,那么这个功能容易修改,在我的前一篇博文中已经给出处理方法了,但是这里有一个问题,就是如果实现了用手机号码来登陆,那么就需要在注册时保证会员所填写的手机号是唯一的,也就是说手机号还未被注册,那么该怎么来检测填写的手机号是否注册过了呢? 一.参考检测邮箱 因为注册页面,有检查用户名和邮箱是否重复的步骤,初步想法是参考检测邮箱的方式来解决,但是查看user_passport.dwt,如下: 似乎可以像上面一样开为手机号的input

Goods:注册页面实现

做个小项目重新回顾一下以前的东东 效果如图所示 regist.jsp代码: 1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 2 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> 3 4 <!DOCTYPE h

Goods:注册页面保存User功能发送邮件以及激活功实现

UserService 1 // 激活功能更 2 public void activation(String code) throws UserException { 3 /* 4 * 1通过激活码查询用户 2如果用户为Null说明是无效激活码 抛出异常 给出异常信息 3.查看用户状态为true 5 */ 6 7 try { 8 User user = userDao.findByCode(code); 9 if (user == null) 10 throw new UserException

springMVC笔记：jsp页面获取后台数据记录列表

1.读取数据库中的记录List<HashMap<String,String>> attributes; 2.Controller构造Model如下: @RequestMapping("display.do") public ModelAndView display(HttpServletRequest request, ModelMap model) { List<HashMap<String, String>> myList = dis

PHP制作登录注册页面

用PHP制作登录和注册页面,一共6个页面,三个可视页面:登录.注册.主页,三个处理页面:验证.添加用户.清除退出 注册 <!--这是注册页面d&z-2-z.php,用户可以提交用户名和密码进行注册,点击注册按钮提交给d&z-4-add.php页面处理--> <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</ti

关闭discuzX3.2注册页面的注册邮箱验证

论坛升级后发现注册用户在输入任何邮箱email时,一直提示email 地址无效.用firephp跟踪发现:随机生成的email的后缀是@localhost! 找到原因,修改如下: //原来代码 if(empty($email) && $_G['setting']['forgeemail']) { $_GET['email'] = $email = strtolower(random(6)).'@'.$_SERVER['HTTP_HOST']; } //但是如果本地调试emai后缀就是@lo

简单带验证的注册页面

<!DOCTYPE html><html> <head>        <meta charset="UTF-8">            <script src="js/jquery-1.11.3.js"></script>        <script src="js/jquery.min.js"></script>        <titl

路飞项目搭建3 TODO注释, 自定义模态框, vue-cookies操作浏览器cookies, 腾讯云短信开发, 代码(登录注册页面，多方式登录，手机是否存在验证接口，腾讯短信开发)

TODO注释 """ 作用:todo是一种特殊的注释,书写就是 # TODO 注释内容,可以在TODO控制台面板快速定位注释位置 """ 自定义模态框 componses/Login.vue <template> <div class="login"> <span @click="close_login">x</span> </div> </