bootstrap表单验证---modal的验证

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();

});