SSM框架的(CRUD)_新增_Ajax校验用户名细节处理20

校验顺序：、
1、先校验是否满足规则
2、再去数据库校验是否已存在

/**
     * 检查用户名是否可用
     * 
     * @param empName
     * @return
     */
    @ResponseBody
    @RequestMapping("/checkuser")
    public Msg checkuser(@RequestParam("empName") String empName) {
        // 先判断用户名是否是合法的表达式;
        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位中文");
        }
        //数据库用户名重复校验
        boolean b = employeeService.checkUser(empName);
        if (b) {
            return Msg.success();
        } else {
            return Msg.fail().add("va_msg", "用户名不可用");
        }
    }

修改index.jsp提示文字信息

//校验用户名是否可用
        $("#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");
                    }
                }
            });
        });

点击添加按钮之后，之前的表单样式应该完整重置

//清空表单样式及内容
        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");
            //发送ajax请求，查出部门信息，显示在下拉列表中
            getDepts();
            //弹出模态框
            $("#empAddModal").modal({
                backdrop:"static"
            });
        });