我们在添加数据时，或许会输入一些非法字符，或者重复添加的情况，那么这个时候我们就需要使用jquery来实现前端校验
如员工名合法 邮箱合法等 我们使用正则表达式即可
JQuery使用文档
加入正则表达式验证后，可以发现会对文本长度进行限制
如此，便完成的校验数据，但我们会发现，这种弹框提示不美观，因此，我们可以使用BootStrap的校验样式进行美化。
function add_form(){
//1.拿到要校验的数据
var uname=$("#userName").val();
var regName=/(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]{2,5})/;
if(!regName.test(uname)){
//alert("用户名为中文2-5位，英文或字符6-16位");
$("#userName").parent().addClass("has-error"); //找其父元素添加属性 错误
$("#userName").next("span").text("用户名为中文2-5位，英文或字符6-16位"); //设置下一个span的文字提示
return false;
}else{
$("#userName").parent().addClass("has-success");
$("#userName").next("span").text("输入正确");
}
return true;
}
我们在原本的input框上改动：
美化后：
完成这个后，我们要做的便是使用ajax校验用户名是否重复，并且会对保存按钮设置属性，若用户名合法则让属性为success,而在点击按钮后就可以根据属性进行判断。
$("#userName").change(function(){
//发送ajax判断是否重复
var userName = this.value;
$.ajax({
url:"${APP_PATH}/checkuser",
type:"POST",
data:"userName="+userName,
success:function(result){
if(result.code==100){
show_validate_msg("#userName","success","用户名可用");
$("#save").attr("ajax-va","success");
}else{
show_validate_msg("#userName","error","用户名不可用");
$("#save").attr("ajax-va","error");
}
}
});
})
$("#save").click(function(){
//1.模态框中填写表单数据并将其提交给服务器保存
var formdata=$("#addmodal form").serialize()//获取表单数据进行序列化，是jquery专门用于ajax请求的
//alert(formdata)
if(!add_form()){
return false;
}
if($(this).attr("ajax-va")=="error"){
return false;
}
$.ajax({
url:"${APP_PATH}/adduser",
type:"POST",
data:formdata,
success:function(result){
//alert(result.msg);
//关闭模态框，跳转到最后一页
$('#addmodal').modal("hide");
to_page(1);//用总记录数作为总页数，因为数据大，所以会跳转至最后一页，也可以传入一个很大的数,
//或者可将数据查询语句按id倒排，然后跳转到首页
}
});
});
如图所示：
表单重置，方式数据保存不会重新校验而出错
//点击新增按钮
$("#add").click(function(){
//模态框表单重置
$("#addmodal form")[0].reset();//jquery中没有reset，dom中有
//在弹出模态框之前需要发送ajax请求，查出部门信息并显示
$("#addmodal select").empty();
getDepts();
$('#addmodal').modal({
backdrop:"static"
})
});