关于bootstrap模态框+bootstrapvalidator验证框架的一些总结 - 好文

使用bootstrapvalidator框架需要做的事情：

1、引入css与js文件
//css样式 <link href="css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<link href="css/bootstrapValidator.min.css" type="text/css" rel="stylesheet" />
//js <script type="text/javascript" src="jquery-1.11.1-min.js"></script>
<script type="text/javascript" src="bootstrap.min.js"></script> <script
type="text/javascript" src="bootstrapValidator.min.js"></script>
2、为需要验证的form表单初始化validator
$(function(){ $("#addForm").bootstrapValidator({ message: 'This value is not
valid', feedbackIcons: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon
glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: {
username: { message: '账号验证失败', validators: { notEmpty: { message: '账号不能为空' },
stringLength: { min: 1, max: 18, message: '账号长度必须在1到18位之间' }, regexp: {//正则表达式
regexp: /^[a-zA-Z0-9_]+$/, message: '账号只能包含大写、小写、数字和下划线' }, remote: {
//ajax验证账号是否重复，注意，此处返回值的格式是: //{"valid":true||false} url:
'setting/qx/user/valid.do', message: '用户名已存在', delay : 2000, type: 'POST',
data: { username: $("#username").val() } } } }, password:{ message: '两次密码必须一致',
validators:{ notEmpty:{ message: '确认密码密码不能为空' }, identical: { field:
'password2', message: '两次输入的密码不相符' } } }, password2:{ message: '两次密码必须一致',
validators:{ notEmpty:{ message: '确认密码密码不能为空' }, identical: { field:
'password', message: '两次输入的密码不相符' } } }, } }); })
3、提交表单的时候验证
$("#saveBtn").click(function(){ var bootstrapValidator =
$("#addForm").data("bootstrapValidator"); bootstrapValidator.validate();
if(bootstrapValidator.isValid()){ $.ajax({//通过ajax请求来提交表单，可以灵活控制提交后的操作
url:"setting/qx/user/save.do", async:false, type:"get",
data:$("#addForm").serialize(), success: function (result) { if
(result=="true") { $('#Modal').modal('hide'); } else {
$("#returnMessage").hide().html('<label class="label
label-danger">修改失败!</label>').show(300); } }, error: function () {
$("#returnMessage").hide().html('<label class="label
label-danger">修改失败!</label>').show(300); } }) } })
4、关于模态窗口，有几点注意：

（1）如果不想让模态窗口在点击空白处就消失，以及按Esc键就消失得方法是加上两个属性

data-backdrop="static" data-keyboard="false"

<div class="modal fade" id="createUserModal" role="dialog"
data-backdrop="static" data-keyboard="false">
（2）在点击提交按钮的时候，不要加data-dismiss="modal"
属性，因为这样就直接关闭窗口而看不到验证消息了，可以在ajax请求之后的回调函数里关闭 $('#Modalid').modal('hide');

热门工具换一换