本文地址:http://www.cnblogs.com/maplefighting/p/7513506.html
jquery前端校验
要是每次校验都alert弹出窗就有点难看，所以我们可以用bootstrap里面的css样式
之前的模态框
<!-- 员工添加模态框 -->
<!-- Modal -->
<div class="modal fade" id="empAddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">员工添加</h4>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="form-group">
<label 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>
<div class="form-group">
<label class="col-sm-2 control-label">email</label>
<div class="col-sm-10">
<input type="text" name="email" class="form-control" id="email_add_input" placeholder="email@atguigu.com">
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">gender</label>
<div class="col-sm-10">
<label class="radio-inline">
<input type="radio" name="gender" id="gender1_add_input" value="M" checked> 男 </label>
<label class="radio-inline">
<input type="radio" name="gender" id="gender2_add_input" value="F"> 女 </label>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">deptName</label>
<div class="col-sm-4">
<select class="form-control" name="dId" id="dept_add_select">
</select>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" id="emp_save_btn">保存</button>
</div>
</div>
</div>
</div>
点击保存按钮前端校验，成功了添加到数据库
点击保存按钮的js（只是前端校验）
//校验表单数据
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)) { show_validate_msg("#empName_add_input", "error", "用户名可以是 2-5 位中文或者6-16位英文和数字、-、_、的组合"); 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", "邮箱格式不正确"); /* $("#email_add_input").parent().addClass("has-error"); $("#email_add_input").next("span").text("邮箱格式不正确"); */
return false; } else { show_validate_msg("#email_add_input", "success", ""); /* $("#email_add_input").parent().addClass("has-success"); $("#email_add_input").next("span").text(""); */ } return true; } 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){ //alert("用户名可以是 2-5 位中文或者6-16位英文和数字、-、_、的组合");
$(ele).parent().addClass("has-error"); $(ele).next("span").text(msg); } } //点击保存，保存员工
$("#emp_save_btn").click(function(){ //1、先对要提交给服务器的数据进行校验
if(!validate_add_form()) { return false; } //1、模态框中填写的表单数据提交给服务器进行保存
//2、发送 Ajax 请求保存员工
$.ajax({ url:"${APP_PATH}/emp", type:"POST", data:$("#empAddModal form").serialize(), success:function(result) { if(result.code == 100) { //alert(result.msg);
//1. 关闭模态框
$("#empAddModal").modal("hide"); //2.来到最后一页
//发送 ajax 显示最后一页的数据
to_page(totalRecord); } } }); });
接下来就要校验数据库用户名是否重复了
但这里发现了一个问题，每次添加进去的元素查询并不会添加到最后面，而是按部门排序的，我也不是很清楚为啥这样，但是我们可以给他定个order by id就好啦
EmployeeService.java
接下来校验用户名不重复的
EmployeeController.java中(顺便加个校验名字是否合法)
/*检查用户名是否可用*/ @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", "用户名不可用"); } }
EmployeeService.java
/** * 检验用户名是否重复不可用 * @param empName * @return true,代表当前姓名用户可用 false，代表不可用 */
public boolean checkUser(String empName) { EmployeeExample example = new EmployeeExample(); Criteria criteria = example.createCriteria(); criteria.andEmpNameEqualTo(empName); long count = employeeMapper.countByExample(example); return count == 0; }
index.jsp里js添加一个用户名改变检验
//校验用户名是否可用
$("#empName_add_input").change(function() { var empName = this.value; //发送ajax请求校验用户名是否可用
$.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"); } } }); }); //点击保存，保存员工
$("#emp_save_btn").click(function(){ //1、先对要提交给服务器的数据进行校验
if(!validate_add_form()) { return false; } //判断之前的ajax请求是否成功
if($(this).attr("ajax-va") == "error") { return false; } //1、模态框中填写的表单数据提交给服务器进行保存
//2、发送 Ajax 请求保存员工
$.ajax({ url:"${APP_PATH}/emp", type:"POST", data:$("#empAddModal form").serialize(), success:function(result) { if(result.code == 100) { //alert(result.msg);
//1. 关闭模态框
$("#empAddModal").modal("hide"); //2.来到最后一页
//发送 ajax 显示最后一页的数据
to_page(totalRecord); } } }); });
但是可以发现，再次点击新增的时候上次的数据还在，点击保存没有再次提交ajax请求，这里就清空算了，不在保存时检查了
清空时清空样式等
//清空
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请求，但是保存时又进行ajax请求，所以可以细化改下
其实前端校验也不安全，改一下前端代码就可以提交了，这里我直接注释掉了，有空再调了
前端校验就差不多这样吧