此系列：IDEA 搭建 基于 SSM 框架 的 Maven 项目， 完成一个基本的Web应用，实现 crud 功能。
(1) 在IDEA中，新建一个Maven工程，并创建好完整的项目结构
(2) 引入项目依赖的 jar 包，引入bootstrap前端框架，编写SSM整合的配置文件
(3) 创建数据库，生成bean文件 和 mapper文件，最后测试该部分
(4) 页面发送请求查询所有员工数据，得到 json 字符串
(5) 设计分页显示页面，解析 json 字符串，展示查询结果
(6) 添加“新增”功能
(7) 对用户输入数据进行校验
(8) 添加“修改”功能
(9) 添加“删除”功能
本节：对用户输入数据进行校验
1. jQuery 前端校验
(1) 在发送 ajax 请求前，增加前端校验方法。校验失败，直接返回。
$("#emp_save_btn").click(function(){
if(!validate_add_form()){
return false;
}
$.ajax({
url:"${APP_PATH}/emp",
type:"POST",
data:$("#empAddModal form").serialize(),
success:function(result){
//alert(result.msg);
$("#empAddModal").modal('hide');
to_page(totalRecord);
}
});
});
(2) 使用正则表达式校验数据
//校验表单数据
function validate_add_form(){
//1、拿到要校验的数据，使用正则表达式
var empName = $("#empName_add_input").val();
var regName = /(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]{2,5})/;
if(!regName.test(empName)){
//alert("用户名可以是2-5位中文或者6-16位英文和数字的组合");
show_validate_msg("#empName_add_input", "error", "用户名可以是2-5位中文或者6-16位英文和数字的组合");
return false;
}else{
show_validate_msg("#empName_add_input", "success", "");
};
//2、校验邮箱信息
var email = $("#email_add_input").val();
var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
if(!regEmail.test(email)){
//alert("邮箱格式不正确");
show_validate_msg("#email_add_input", "error", "邮箱格式不正确");
return false;
}else{
show_validate_msg("#email_add_input", "success", "");
}
return true;
}
(3) 显示校验结果的提示信息
//显示校验结果的提示信息
function show_validate_msg(ele,status,msg){
//清除当前元素的校验状态
$(ele).parent().removeClass("has-success has-error");
$(ele).next("span").text("");
if("success"==status){
$(ele).parent().addClass("has-success");
$(ele).next("span").text(msg);
}else if("error" == status){
$(ele).parent().addClass("has-error");
$(ele).next("span").text(msg);
}
}
2. ajax 校验数据是否重复
(1) 在index.jsp中为用户名输入框添加 change 方法
//校验用户名是否可用
$("#empName_add_input").change(function(){
//发送ajax请求校验用户名是否可用
var empName = this.value;
$.ajax({
url:"${APP_PATH}/checkuser",
data:"empName="+empName,
type:"POST",
success:function(result){
if(result.code==100){
show_validate_msg("#empName_add_input","success","用户名可用");
$("#emp_save_btn").attr("ajax-va","success");
}else{
show_validate_msg("#empName_add_input","error",result.extend.va_msg);
$("#emp_save_btn").attr("ajax-va","error");
}
}
});
});
(2) 在$("#emp_save_btn").click(function(){}函数中，发送 ajax 请求前，添加函数
if($(this).attr("ajax-va")=="error"){
return false;
}
(3) EmployeeController中增加checkuser方法
/**
* 检查用户名是否可用
* @param empName
* @return
*/
@ResponseBody
@RequestMapping("/checkuser")
public Msg checkuser(@RequestParam("empName")String empName){
//数据库用户名重复校验
boolean b = employeeService.checkUser(empName);
if(b){
return Msg.success();
}else{
return Msg.fail().add("va_msg", "用户名不可用");
}
}
(4) EmployeeService中增加checkUser方法
/**
* 检验用户名是否可用
*
* @param empName
* @return true：代表当前姓名可用 fasle：不可用
*/
public boolean checkUser(String empName) {
EmployeeExample example = new EmployeeExample();
EmployeeExample.Criteria criteria = example.createCriteria();
criteria.andEmpNameEqualTo(empName);
long count = employeeMapper.countByExample(example);
return count == 0;
}
(5) 使用 ajax 页面没有刷新，模态框中数据依旧存在，需要清空一下。否则直接点保存按钮，数据还会再次插入到数据库中。$("#emp_add_modal_btn").click(function(){}点击事件中，添加函数
$("#empAddModal form")[0].reset();
(6) 此时，如果输入一个数据库中合法的数据，然而不满足前端校验。会先显示用户名可用，点击保存按钮后，又出现用户名不可用。需要优化一下。EmployeeController中修改checkuser方法，先判断用户名是否合法，再去调用employeeService.checkUser()函数去数据库中进行校验
//先判断用户名是否是合法的表达式;
String regx = "(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]{2,5})";
if(!empName.matches(regx)){
return Msg.fail().add("va_msg", "用户名必须是6-16位数字和字母的组合或者2-5位中文");
}
(7) 在上上一步，重置了表单的内容，但依旧有表单的样式。需要每次弹出模态框时，重置表单的样式。
//清空表单样式及内容
function reset_form(ele){
$(ele)[0].reset();
//清空表单样式
$(ele).find("*").removeClass("has-error has-success");
$(ele).find(".help-block").text("");
}
$("#emp_add_modal_btn").click(function(){
//清除表单数据（表单完整重置（表单的数据，表单的样式））
reset_form("#empAddModal form");
getDepts();
//弹出模态框
$("#empAddModal").modal({
backdrop:"static"
});
});
3. JSR303 后端校验
(1) bean包下Employee中，在 empName 和 email 加上校验规则
@Pattern(regexp="(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]{2,5})"
,message="用户名必须是2-5位中文或者6-16位英文和数字的组合")
private String empName;
@Pattern(regexp="^([a-z0-9_\\.-]+)@([\\da-z\\.-]+)\\.([a-z\\.]{2,6})$",
message="邮箱格式不正确")
private String email;
(2) EmployeeController中增加支持JSR303校验
/**
* 员工保存
* 1、支持JSR303校验
* 2、导入Hibernate-Validator
*
*
* @return
*/
@RequestMapping(value="/emp",method=RequestMethod.POST)
@ResponseBody
public Msg saveEmp(@Valid Employee employee,BindingResult result){
if(result.hasErrors()){
//校验失败，应该返回失败，在模态框中显示校验失败的错误信息
Map<String, Object> map = new HashMap<>();
List<FieldError> errors = result.getFieldErrors();
for (FieldError fieldError : errors) {
System.out.println("错误的字段名："+fieldError.getField());
System.out.println("错误信息："+fieldError.getDefaultMessage());
map.put(fieldError.getField(), fieldError.getDefaultMessage());
}
return Msg.fail().add("errorFields", map);
}else{
employeeService.saveEmp(employee);
return Msg.success();
}
}
(3) $("#emp_save_btn").click(function(){}点击事件中修改为：
$("#emp_save_btn").click(function(){
if(!validate_add_form()){
return false;
}
if($(this).attr("ajax-va")=="error"){
return false;
}
$.ajax({
url:"${APP_PATH}/emp",
type:"POST",
data:$("#empAddModal form").serialize(),
success:function(result){
//alert(result.msg);
if(result.code == 100){
$("#empAddModal").modal('hide');
to_page(totalRecord);
}else{
if(undefined != result.extend.errorFields.email){
//显示邮箱错误信息
show_validate_msg("#email_add_input", "error", result.extend.errorFields.email);
}
if(undefined != result.extend.errorFields.empName){
//显示员工名字的错误信息
show_validate_msg("#empName_add_input", "error", result.extend.errorFields.empName);
}
}
}
});
});
校验可能还有不合理的地方，可以自行修改一下。
下一节：添加“修改”功能
