ssm项目之前端数据校验
本文地址: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请求，所以可以细化改下
其实前端校验也不安全，改一下前端代码就可以提交了，这里我直接注释掉了，有空再调了
前端校验就差不多这样吧
本文版权归作者本人所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利.
