【当当网】电子书城-03-注册表单的验证功能
前文传送门:
【当当网】电子书城-01-市场背景与项目搭建-CSDN博客
【当当网】电子书城-02-验证码的实现-CSDN博客
点波关注,不迷路
🌲 注册表单验证功能
🌿 为什么要进行表单验证
表单验证,是指数据在加入到数据库之前,对用户输入的数据进行约束,从而保证进入到数据库中的数据的有效性。
表单验证可以在前端浏览器中进行也可以在后端服务器中进行。但是需要注意的是,如果全部在后端服务器中进行,那么会对服务器造成很大的压力。因此我们一般将简单的非空、长度、格式等验证放在前端。而需要和服务器进行数据比对的验证,比如:验证邮箱是否被使用、验证码是否正确等等可以放在服务器端进行验证。从而减轻服务器端的压力。
🌿 验证框架的使用
本项目中我们使用JQueryValidate.js验证框架进行表单验证,由于JQueryValidate表单验证是基于JQuery的,所以在进行在使用之前,需要先引入JQuery框架。
<script src="../js/jquery-1.4.3.js"></script>
<%-- 引入JQuery Validate 框架--%>
<script type="text/javascript" src="../js/jquery.validate.min.js"></script>
validate验证框架首先需要找到需要添加验证规则的表单,然后通过validate()函数中的rules设置验证规则,通过messages设置触犯验证规则后显示的消息,如下面代码所示:
$("#regist_form").validate({
// 制定验证规则
rules:{
},
// 制定当触犯验证规则时显示的消息
messages:{
}
});
设置验证规则时,我们需要通过表单输入框的name属性来查找对应的输入框并设置验证规则和消息,比如项目中邮箱的输入框如下:
<input name="user.email" type="text" id="txtEmail" class="text_input"/>
那么给邮箱输入框设置验证规则的代码就可以写成如下格式:
$("#regist_form").validate({
// 制定验证规则
rules:{
// 找到name属性为“user.email”标签,添加验证规则
"user.email":{
// required 表示是否为必填项, true 表示为必填
required : true,
// email 表示是否开启邮箱格式的验证
email:true,
remote:{
type: "GET",
url:"userAction?method=checkEmail",
data:{
email:function(){
return $("#txtEmail").val();
}
}
}
}
},
// 制定当触犯验证规则时显示的消息
messages:{
"user.email":{
required:"请输入邮箱",
email:"邮箱格式错误",
remote:"邮箱已经被注册"
}
}
});
最后我们需要为触犯验证消息时错误消息的展示设置label标签,具体写法如下:
<label for="txtEmail" style="color:red" class="error"></label>
- 当触犯验证规则时,错误消息,需要显示到label标签中
- for="txtEmail" 表示为id为txtEmail的标签显示错误消息
- class="error" 表示,当有错误消息时,会根据class="error"自动识别label标签,显示错误消息
测试时需要注意以下几点:
1. Jquery validate验证框架需要基于Jquery框架的,所以先引入JQuery再引入validate
2. 如果引入了validate.js 但是运行起来之后找不到验证框架,需要点Build-》rebuild Project重构一下项目
3. 如果错误消息显示的是英文,就检查messages是否写成了message
4. 如果错误消息显示的是黑体,就检查label是否写对了
常见的验证规则:
序号 | 规则 | 描述 | |
1 | required:true | 必须输入的字段。 | |
2 | remote:"check.php" | 使用 ajax 方法调用 check.php 验证输入值。 | |
3 | email:true | 必须输入正确格式的电子邮件。 | |
4 | url:true | 必须输入正确格式的网址。 | |
5 | date:true | 必须输入正确格式的日期。日期校验 ie6 出错,慎用。 | |
6 | dateISO:true | 必须输入正确格式的日期(ISO), 例如:2009-06-23,1998/01/22。只验证格式,不验证有效性。 | |
7 | number:true | 必须输入合法的数字(负数,小数)。 | |
8 | digits:true | 必须输入整数。 | |
9 | creditcard: | 必须输入合法的信用卡号。 | |
10 | equalTo:"#field" | 输入值必须和 #field 相同。 | |
11 | accept: | 输入拥有合法后缀名的字符串(上传文件的后缀)。 | |
12 | maxlength:5 | 输入长度最多是 5 的字符串(汉字算一个字符)。 | |
13 | minlength:10 | 输入长度最小是 10 的字符串(汉字算一个字符)。 | |
14 | rangelength:[5,10] | 输入长度必须介于 5 和 10 之间的字符串(汉字算一个字符)。 | |
15 | range:[5,10] | 输入值必须介于 5 和 10 之间。 | |
16 | max:5 | 输入值不能大于 5。 | |
17 | min:10 | 输入值不能小于 10。 |
🌿 注册时的表单验证
首先给注册页面所有的表单输入框添加验证规则:
// 给id为regist_form的表单添加验证规则
$("#regist_form").validate({
// 制定验证规则
rules:{
// 找到name属性为“user.email”标签,添加验证规则
"user.email":{
// required 表示是否为必填项, true 表示为必填
required : true,
// email 表示是否开启邮箱格式的验证
email:true,
remote:{
type: "GET",
url:"userAction?method=checkEmail",
data:{
email:function(){
return $("#txtEmail").val();
}
}
}
},
"user.nickname":{
required:true,
// rangelength: 设置长度范围
rangelength:[4,20]
},
"user.password":{
required:true,
rangelength:[6,20]
},
"password1":{
required:true,
// equalTo:表示输入框中输入的内容要和指定的输入框中的一致
// 下面代码表示,当前输入框的内容要和id为txtPassword的输入框中的内容一致
equalTo:"#txtPassword"
},
"number":{
required:true,
// 异步验证
remote:{
// 异步请求的方式
type:"GET",
// 异步请求的地址
url:"userAction?method=checkCode",
// 携带的数据
data:{
// 将验证码的内容,封装成名字为number的数据
number:function(){
// 获取验证码输入框中的内容,
return $("#txtVerifyCode").val();
}
}
}
}
},
// 制定当触犯验证规则时显示的消息
messages:{
"number":{
required:"请输入验证码",
remote:"验证码错误"
},
"password1":{
required:"请确认密码",
equalTo:"两次输入的密码不一致"
},
"user.password":{
required:"请输入密码",
rangelength:"长度必须为6-20个字符"
},
"user.email":{
required:"请输入邮箱",
email:"邮箱格式错误",
remote:"邮箱已经被注册"
},
"user.nickname":{
required:"请输入昵称",
rangelength:"长度必须为4-20个字符"
}
}
});
然后分别给每个输入框设置显示错误消息的label:
<label for="txtEmail" style="color:red" class="error"></label>
<label for="txtNickName" style="color:red" class="error"></label>
<label for="txtPassword" style="color:red" class="error"></label>
<label for="txtRepeatPass" style="color:red" class="error"></label>
<label for="txtVerifyCode" style="color:red" class="error"></label>
在验证验证码时,我们前面将输入的验证码发送到服务器里面去匹配并获取到结果,服务器端代码具体如下:
/**
* 处理检查验证码的请求
* 1. 从session中获取保存的验证码
* 2. 从请求中获取用户输入的验证码
* 3. 比较两个验证码
* @param req
* @param resp
*/
public void checkCode(HttpServletRequest req, HttpServletResponse resp) throws IOException {
//1. 从session中获取保存的验证码
String sessionCode = (String)req.getSession().getAttribute("code");
//2. 从请求参数中获取验证码
String inputCode = req.getParameter("number");
//3. 比较两个验证码
boolean result = sessionCode.equalsIgnoreCase(inputCode);
//将结果返回给客户端
PrintWriter out = resp.getWriter();
out.println(result); // 此处返回的是true,验证通过,返回false,验证失败
}
在验证邮箱中,我们将输入的邮箱发到了服务里面查询一下当前邮箱是否被占用了,如果被占用就不能注册此邮箱,保证我们数据库中的邮箱是唯一的,服务端代码写法如下:
/**
* 检查邮箱是否被注册
* @param req
* @param resp
*/
public void checkEmail(HttpServletRequest req, HttpServletResponse resp) throws IOException {
// 从请求中获取邮箱
String email = req.getParameter("email");
// 创建与用户相关的业务人员
UserService service = new UserServiceImpl();
// 让业务人员去检查邮箱是否可用,并返回结果
boolean result = service.checkEmail(email);
// 将处理结果返回给浏览器
PrintWriter out = resp.getWriter();
out.println(result);
}
在业务端中,我们需要添加检查邮箱是否被占用的业务逻辑,具体代码如下:
/**
* 检查邮箱是否可用
* @param email
* @return
*/
@Override
public boolean checkEmail(String email) {
// 创建仓库管理员(Dao)
UserDao dao = new UserDaoImpl();
// 让仓库管理员拿着邮箱去数据库中查找是否有对应的用户
User user = dao.findUserByEmail(email);
// 将结果返回给控制器层
return user==null;
}
在dao中,我们需要让dao根据邮箱去数据库中查找数据,看是否能查到数据,具体代码如下:
/**
* 根据制定邮箱查询用户
* @param email
* @return
*/
@Override
public User findUserByEmail(String email) {
String sql = "select * from d_d_user where email=?";
return DBUtils.queryOne(User.class,sql,email);
}