【当当网】电子书城-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);
}