form表单验证（使用ajax和ajaxSubmit）
form表单验证（使用ajax和ajaxSubmit）
本博客由本人做项目时碰到的bug，解决后所写为了警示自己，同时希望能对别人有所帮助：
引入JQuery_form.js
<script type="text/javascript" src="${ctxStatic}/jquery/jquery.form.js">script>我之前是直接使用ajaxSubmit但是界面一直无法实现，在浏览器F12后，报出的错误说ajaxSubmit不是方法，去度娘问了问，原来是我缺少这个js文件，只要引入就可以使用ajaxSubmit了。
项目流程
因为篇幅的缘故我就只挑主要的讲解了，我做的是一个form表单，其中包含了3个gird选择框（由于公司项目gird选择框都是封装好的就不做说明了，只是讲一讲思路）首先其中第一个gird我就叫g1,其他以此类推，首先当g2选择出一条数据后，会将这条数据中其中一个属性回传给input标签中显示，我要将g2的值获取到传给g3并作为g3的一个从数据库取数据的条件之一，从数据库获取g3的数据；当我在浏览器完成了数据的填写工作后，我点击提交，注意此时不对button标签设置onclick点击事件，因为使用了validate()进行表单的验证，在其中使用ajaxSubmit作为事件，去寻找controller层中相应的方法……忘记说了，在点击时首先会触发ajax寻找controller层先去做一次校验，校验g1选中的值是否已经提交过，因为数据表中有一条属性为status记录提交状态，所以要校验的就是status属性是否为1。
校验状态
var shoporderNo = $("#shoporderNoName").val();
var isLssued = true;
$.ajax({
type:"post",
url:"*****/isLssued?shoporderNo="+shoporderNo,
cache : false,
async : false,
dataType : "json",
success : function(obj) {
isLssued = obj;
}
});
if (isLssued) {
layer.msg("工单已下达，无需重复下达！！！", {
icon : 5,
shift : 6
});这是前端写在validate中的ajax，首先将从g1获取的属性通过url传给后台controller，会通过传回来的值访问访问数据库获取数据存储在list中，（我这里并不是直接在controller层访问数据库，都知道所有的业务逻辑都是写在service层中，再调用dao层方法，dao层方法对应着mybatis中的映射文件……）判断list是否为空，如果是则return false;否则return true;
ajaxSubmit
$(form).ajaxSubmit({// 验证新增是否成功
type : "post",
dataType : "json",
success : function(data) {
var rs = data;
if (rs.status == true) {
if (CommnUtil.notNull(rs.score)) {
layer.alert('恭喜你，添加成功，本次操作得分：'+rs.score+"，是否关闭窗口？", {
skin: 'layui-layer-molv' //样式类名 自定义样式
,closeBtn: 1 // 是否显示关闭按钮
,anim: 1 //动画类型
,btn: ['关闭'] //按钮
,icon: 6 // icon
,yes:function(){
window.parent.location.reload(); //刷新父页面
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);//关闭自身页面
return false;
}});
}else {
layer.msg('下达成功', {
icon : 1
});
}
$(this).resetForm();
} else {
layer.msg("下达失败", {
icon : 5,
shift : 6
});
}
}
});首先说明CommnUtil是我自定义的,写在JS中。ajaxSubmit用法几乎和ajax一样，其中内容不再过多详述，之所以没有url是因为ajaxSubmit会直接寻找到form中的action属性……至于g2值传给g3，就不再粘贴代码了，只是讲思路。
当我g2选择一条数据后，显示在input中的值，身处同一JSP中的g3是可以获取到的， $(“#**“).val();再将值传给后台，后端通过这个条件就可以获取对应的数据了。
完整代码
$(document).ready(function() {
validateForm = $("#inputForm").validate({
submitHandler: function(form){
var shoporderNo = $("#**").val();
var isLssued = true;
$.ajax({
type:"post",
url:"****?shoporderNo="+shoporderNo,
cache : false,
async : false,
dataType : "json",
success : function(obj) {
isLssued = obj;
}
});
if (isLssued) {
layer.msg("工单已下达，无需重复下达！！！", {
icon : 5,
shift : 6
});
return;
}
$(form).ajaxSubmit({// 验证新增是否成功
type : "post",
dataType : "json",
success : function(data) {
var rs = data;
if (rs.status == true) {
if (CommnUtil.notNull(rs.score)) {
layer.alert('恭喜你，添加成功，本次操作得分：'+rs.score+"，是否关闭窗口？", {
skin: 'layui-layer-molv' //样式类名 自定义样式
,closeBtn: 1 // 是否显示关闭按钮
,anim: 1 //动画类型
,btn: ['关闭'] //按钮
,icon: 6 // icon
,yes:function(){
window.parent.location.reload(); //刷新父页面
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);//关闭自身页面
return false;
}});
}else {
layer.msg('下达成功', {
icon : 1
});
}
$(this).resetForm();
} else {
layer.msg("下达失败", {
icon : 5,
shift : 6
});
}
}
});
},
errorContainer: "#messageBox",
errorPlacement: function(error, element) {
$("#messageBox").text("输入有误，请先更正。");
if (element.is(":checkbox")||element.is(":radio")||element.parent().is(".input-append")){
error.appendTo(element.parent().parent());
} else {
error.insertAfter(element);
}
}
});
});end
此博客全由自己在开发时所碰到的bug有感而发，如有雷同，认识一下，哈哈，如果有错误希望大神指出来，在开发这条道路上，只有不断更新自己的技术，不断提升，不断修正才会勇往直前，希望不吝赐教。