CRUD（24）：新增-校验信息优化

官方文档的校验框使用说明

一、做成这样的效果：

二、给input框的父元素添加一个css：

$("#empName_add_input").parent().addClass("has-error");

三、在Input后面添加一个span标签：

                                                     <input type="text" 
class="form-control" name="email"

                                                            id="email_add_input" 
placeholder="hello123@qq.com"> <span

                                                            class="help-block"> 
</span>

四、找到input的下一个标签，设置提示内容：

$("#empName_add_input").next().text("用户名可以是2-5位中文、6.16位字母、横杠或下划线");

五、每次写入之前都应该清空这个元素之前的数据和状态：

$(ele).parent().removeClass("has-success has-error");

六、完整逻辑代码：

             //定义校验函数

             function validate_add_form() {

                    //1.拿到校验数据，.使用正则表达式进行校验



                    var empName = $("#empName_add_input").val();

                    var regName = 
/(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]{2,5}$)/;



                    var email = $("#email_add_input").val();

                    var regEmail = 
/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;



                    //校验名字

                    if (!regName.test(empName)) {

                           show_validate_msg("#empName_add_input", "error",

                                        "用户名可以是2-5位中文、6.16位字母、横杠或下划线");

                           return false;

                    } else {

                           show_validate_msg("#empName_add_input", "success", 
"");

                    }

                    

                    //校验邮箱

                    if (!regEmail.test(email)) {

                           show_validate_msg("#email_add_input", "error", "请输入正确的邮箱格式，如abc@qq.com");

                           return false;

                    } else {

                           show_validate_msg("#email_add_input", "success", "");

                    }

                    return true;

             }



             function show_validate_msg(ele, status, msg){

                    //清除校验状态

                    $(ele).parent().removeClass("has-success has-error");

                    if ("success" == status) {

                           $(ele).parent().addClass("has-success");

                           $(ele).next().text(msg);

                    } else if ("error" == status) {

                           $(ele).parent().addClass("has-error");

                           $(ele).next().text(msg);

                    }

             }

七、效果演示：