上一节利用js校验数据的合法性,这一节结合ajax请求验证用户名是否可用,即是否已经存在。
首先我们要根据输入的empName查询数据库是否存在该用户:
EmployeeController.java
//检查用户名是否可用
@ResponseBody
@RequestMapping("/checkuser")
public Msg checkUser(String empName) {
boolean b = employeeService.checkUser(empName);
if(b) {
return Msg.success();
}
return Msg.fail();
}
EmployeeService.java
public boolean checkUser(String empName);
EmployeeServiceImpl.java
@Override
public boolean checkUser(String empName) {
// TODO Auto-generated method stub
EmployeeExample example = new EmployeeExample();
Criteria criteria = example.createCriteria();
criteria.andEmpNameEqualTo(empName);
long count = employeeMapper.countByExample(example);
return count == 0;
}
add.js
//点击新增弹出模态框
$("#emp_add_modal_btn").click(function(){
//发送ajax请求,查出部门信息显示下拉列表
reset_form("#empAddModal form");
getDepts("#empAddModal select");
$("#empAddModal").modal({
backdrop:"static"
});
});
//清空表单样式和内容
function reset_form(ele){
$(ele)[0].reset();
$(ele).find('*').removeClass("has-error has-success");
$(ele).find(".help-block").text("");
}
//查询所有部门信息
function getDepts(ele){
$(ele).empty();
$.ajax({
url:"/curd_ssm/depts",
type:"GET",
success:function(result){
//console.log(result);
$.each(result.extend.depts,function(){
var optionEle = $("<option></option>").append(this.deptName).attr("value",this.deptId);
optionEle.appendTo(ele);
});
}
});
}
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);
}
}
function validate_add_form(){
var empName = $("#empName_add_input").val();
var regName = /(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]{2,5})/;
if(!regName.test(empName)){
//alert("用户名必须是6-16位英文或2-5位中文");
//$("#empName_add_input").empty();
show_validate_msg("#empName_add_input","error","用户名必须是6-16位英文或2-5位中文");
return false;
}else{
show_validate_msg("#empName_add_input","success","");
}
var email = $("#email_add_input").val();
var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
if(!regEmail.test(email)){
//alert("邮箱格式不正确");
//$("#email_add_input").empty();
show_validate_msg("#email_add_input","error","邮箱格式不正确");
return false;
}else{
show_validate_msg("#email_add_input","success","");
}
return true;
}
$("#empName_add_input").change(function(){
//$("#empName_add_input").empty();
var empName = this.value;
$.ajax({
url:"/curd_ssm/checkuser",
data:"empName=" + empName,
type:"POST",
success:function(result){
if(result.code == 100){
show_validate_msg("#empName_add_input","success","用户名可用");
$("#emp_save").attr("ajx-va","success");
}else{
show_validate_msg("#empName_add_input","error","用户名不可用");
$("#emp_save").attr("ajx-va","error");
}
}
});
});
$("#emp_save").click(function(){
//alert($("#empAddModal form").serialize());
if(!validate_add_form()){
return false;
}
if($(this).attr("ajx-va")=="error"){
return false;
}
$.ajax({
url:"/curd_ssm/emp",
type:"POST",
data:$("#empAddModal form").serialize(),
success:function(result){
//关闭模态框,转到最后一页
$("#empName_add_input").empty();
$("#email_add_input").empty();
$("#empAddModal").modal('hide');
to_page(totalRecord);
//alert(result.msg);
}
});
});
红色标注是我们新增的,橙色部分需要我们注意的地方,
因为这种情况下如果不进行禁止保存按钮的使用,此时依然是可以保存的,添加"ajx-va"==error,在之后提交的时候进行判断,就可以避免这种情况的发生。改成正确用户名之后:
点击保存: