本文地址: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請求，所以可以細化改下
其實前端校驗也不安全，改一下前端代碼就可以提交了，這里我直接注釋掉了，有空再調了
前端校驗就差不多這樣吧