SSM整合_校验

前端校验:
在模态框中保存按钮的点击事件中在发ajax请求保存员工前添加以下代码

 //校验表单数据是否合法
        if (!emps_add_jiaoyan()) {
            return false;
        }
        //判断之前的ajax用户名校验是否成功
        if ($(this).attr("ajax-va")=="error"){
            return false;
        }

校验后的错误信息提示显示在模态框中的span标签中,class为help-block,bootstrap使检验提示信息更好看

<div class="form-group">
            <label for="empName_add_input" class="col-sm-2 control-label">empName</label>
            <div class="col-sm-10">
                <input type="text" name="empName" class="form-control" id="empName_add_input"
                       placeholder="empName">
                <span class="help-block"></span>
            </div>
        </div>

下面是模态框中校验员工name,email信息的

//校验表单数据
    function emps_add_jiaoyan() {
        //拿到要校验的数据,使用正则表达式进行校验
        var empName = $("#empName_add_input").val();
        //中文、英文、数字但不包括下划线等符号的用户名
        var regName = /^[\u4E00-\u9FA5A-Za-z0-9]{3,10}$/;
        if (!regName.test(empName)) {
            // alert("名字可以是3~10位中午,英文,数字");
            show_validata_msg("#empName_add_input", "error", "名字可以是3~10位中文,英文,数字");
            return false;
        } else {
            show_validata_msg("#empName_add_input", "success", "用户名可用");
        }

        //校验邮箱信息
        var empemail = $("#email_add_input").val();
        var regemail = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
        if (!regemail.test(empemail)) {
            // alert("邮箱格式不正确");
            show_validata_msg("#email_add_input", "error", "邮箱格式不正确");
            return false;
        } else {
            show_validata_msg("#email_add_input", "success", "邮箱可用");

        }
        return true;
    }

显示校验结果的提示信息

//显示校验结果的提示信息
    function show_validata_msg(ele, statue, msg) {
        //每次显示前清除当前元素的检验状态
        $(ele).parent().removeClass("has-success has-error");
        //span中放的是校验结果的提示信息
        $(ele).next("span").text("");
        if ("success" == statue) {
            $(ele).parent().addClass("has-success");
            $(ele).next("span").text(msg);
        } else if ("error" == statue) {
            $(ele).parent().addClass("has-error");
            $(ele).next("span").text(msg);
        }
    }

ajax检验用户名是否重复

 //检验用户名是否可用
    $("#empName_add_input").change(function () {
       //发送ajax请求校验用户名是否可用
        var empName = $("#empName_add_input").val();
        $.ajax({
            url:"${APP_PATH}/checkEmpName",
            data:"empName="+empName,
            type:"POST",
            success:function (result) {
                if (result.code==100){
                    show_validata_msg("#empName_add_input","success","用户名可用");
                    $("#emp_save_btn").attr("ajax-va","success");
                }else{
                    show_validata_msg("#empName_add_input","error",result.extend.va_msg);
                    $("#emp_save_btn").attr("ajax-va","error");

                }

            }

        })
    });

到控制器中写方法:

 //检验用户名是否可用
    @ResponseBody
    @RequestMapping("/checkEmpName")
    public Msg checkEmpName(@RequestParam("empName") String empName){
        //先判断用户名是否是合法的表达式
        String reg = "^[\u4E00-\u9FA5A-Za-z0-9]{3,10}$";
        if(!empName.matches(reg)){
            return Msg.fail().add("va_msg","名字可以是3~10位中文,英文,数字");

        }
        //数据库用户名重复校验
        boolean i = employeeService.checkEmpName(empName);
        if (i){
            return Msg.success();
        }else{
            return Msg.fail().add("va_msg","用户名不可用");
        }
    }

service层

//检验用户名是否重复
    //return:ture:用户名可用 false:用户名不可用
    public boolean checkEmpName(String empName) {
        EmployeeExample employeeExample = new EmployeeExample();
        EmployeeExample.Criteria criteria = employeeExample.createCriteria();
        criteria.andEmpNameEqualTo(empName);
        long l = employeeMapper.countByExample(employeeExample);
        return l == 0;
    }

邮箱校验:

 //检验email是否可用
    $("#email_add_input").change(function () {
        var empemail = $("#email_add_input").val();
        var regemail = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
        if (!regemail.test(empemail)) {
            // alert("邮箱格式不正确");
            show_validata_msg("#email_add_input", "error", "邮箱格式不正确");
            return false;
        } else {
            show_validata_msg("#email_add_input", "success", "邮箱可用");
        }
    });

最后要清空表单:

//解析并显示分页信息
    function build_page_info(result) {
        //清空信息
        $("#fyxx").empty();
        $("#fyxx").append("当前第" + result.extend.pageInfo.pageNum + "页,总共" +
            result.extend.pageInfo.pages + "页,总共" +
            result.extend.pageInfo.total + "条记录")
        total = result.extend.pageInfo.total;
    }