基于maven+ssm的增删改查之前端校验数据合法性

接上一节。

直接在add.js中修改即可。如果index.jsp没有相应的id属性，直接加上匹配add.js中的即可。

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位中文");
        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("邮箱格式不正确");
        show_validate_msg("#email_add_input","error","邮箱格式不正确");
        return false;
    }else{
        show_validate_msg("#email_add_input","success","");
    }    

    return true;
}

$("#emp_save").click(function(){
    //alert($("#empAddModal form").serialize());
    if(!validate_add_form()){
        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);
        }
    });
    
});

新加的如标红所示。

启动服务器查看效果：

用户名输入正确之后，邮箱输入不正确：

用户名的输入框成功的变回了绿色，都输入正确之后，点击保存：