基于maven+ssm的增删改查之ajax校验用户名是否可用

上一节利用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，在之后提交的时候进行判断，就可以避免这种情况的发生。改成正确用户名之后：

点击保存：