modal的验证和一般的页面的验证有所区别：
流程：
1、引入bootstrap的验证文件以及jquery.js文件，
2、在js文件中写入：（modal页面其实就是原来的jsp页面的嵌套页面，直接在原来的jsp页面导入modal页面即可，其实就是一个页面。js代码也放在一起写）
js代码如下：开始在页面加载的时候写入$(function(){formValidator();}).调用这个方法。
function formValidator(){
$("#newyldForm").bootstrapValidator({
message:"no valid",
feedbackIcons: {/*输入框填入和不填内容不同状态（√还是×），显示图片的样式*/
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields:
{
basinname:{
message:"name validtor error",//抛出错误信息
validators:{
notEmpty:{//非空验证
message:'名字不能为空'
}
}
},
year:{
message:"year validtor error",
validators:{
notEmpty:{
message:'年份不能为空'
}
}
},
month:{
message:"month validtor error",
validators:{
notEmpty:{
message:'月份不能为空'
}
}
},
day:{
message:"day validtor error",
validators:{
notEmpty:{
message:'日期不能为空'
}
}
},
dailyprep:{
message:"dailyprep validtor error",
validators:{
notEmpty:{
message:'日降水量不能为空'
}
}
},
station:{
message:"station validtor error",
validators:{
notEmpty:{
message:'观测站不能为空'
}
}
}
}
});
}
// 提交保存，点击确定按钮
function newyldsubmit(){
//开启验证
$('#newyldForm').data('bootstrapValidator').validate();
if(!$('#newyldForm').data('bootstrapValidator').isValid()){
return ;
}
//表单提交 （ajax请求）...
$.ajax({
type:"post",
datatype:"json",
url:"../basin/yld/add",
async:false,
data:$('#newyldForm').serialize(),
success:function(data){
if(data.status == 1){
$('#modal-yld').modal("hide"),//模态框的隐藏
$('#yldList').bootstrapTable("refresh");
}
else{
if(data.msg){
shuitu.modal.confirm(data.msg)
}
}
}
});
}
//Modal验证销毁重构，防止第二次打开modal时显示上一次的验证痕迹
$('#modal-yld').on('hidden.bs.modal', function() {
$('#newyldForm').data('bootstrapValidator').destroy();
$('#newyldForm').data('bootstrapValidator', null);
formValidator();
});
网友评论