最近看了手机端表现好的模态框,比较了mui,layui-mobile,和bootstrap的modal,最后觉得还是bootstrap最好用
我用的是vue项目
首先分别引入bootstrap和bootstrapValidator
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=yes,width=device-width,height=device-height">
<title>资费PK</title>
<link rel="stylesheet" href="../common/mui/css/mui.css">
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrapValidator.css">
<script src="js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../common/mui/js/mui.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrapValidator.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script><style>
</style>
</head>
html:
<div class="modal fade" id="applyPackage" 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="applyPackageLabel">套餐办理</h4>
</div>
<div class="modal-body">
<div class="title">
您想要办理的套餐为:{{pickedName}},请留下您的联系方式,我们将尽快联系您为您办理套餐业务!
</div>
<form action="" id="applyForm">
<input type="hidden" name="packageId">
<input type="hidden" name="packageName">
<input type="hidden" name="userId">
<div class="row form-group">
<label class="control-label col-xs-4 col-sm-4">姓名:</label>
<div class="col-sm-8 col-xs-8">
<input class="form-control" name="userName" id="userName"/>
</div>
</div>
<div class="row form-group">
<label class="control-label col-xs-4 col-sm-4">手机号码:</label>
<div class="col-sm-8 col-xs-8">
<input class="form-control" name="phoneNo"/>
</div>
</div>
<div class="row form-group">
<label class="control-label col-xs-4 col-sm-4">E-MAIL:</label>
<div class="col-sm-8 col-xs-8">
<input class="form-control" name="email"/>
</div>
</div>
<div class="row form-group">
<label class="control-label col-xs-4 col-sm-4">身份证号:</label>
<div class="col-sm-8 col-xs-8">
<input class="form-control" name="idNo"/>
</div>
</div>
<div class="row form-group">
<label class="control-label col-xs-4 col-sm-4">地址:</label>
<div class="col-sm-8 col-xs-8">
<input class="form-control" name="address"/>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消办理</button>
<button type="submit" class="btn btn-primary" @click="doApply">确认办理</button>
</div>
</div>
</div>
</div>
js:
var vm=new Vue({
el:"#main",
data:{
userId:"",
},
methods:{
/*绑定验证*/
bindValidation(){
$("#applyForm").bootstrapValidator({
message: '输入值不合法',
//excluded: [':disabled', ':hidden', ':not(:visible)'],
live: 'enabled',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
userName: {
message: '用户名不合法',
validators: {
notEmpty: {
message: '用户名不能为空'
},
stringLength: {
min: 2,
max: 4,
message: '请输入2到4个字符'
},
regexp: {
regexp: /^[a-zA-Z0-9_\. \u4e00-\u9fa5 ]+$/,
message: '用户名只能由字母、数字、点、下划线和汉字组成 '
}
}
}
, email: {
validators: {
notEmpty: {
message: 'email不能为空'
},
emailAddress: {
message: '请输入正确的邮件地址如:123@qq.com'
}
}
}, phoneNo: {
validators: {
notEmpty: {
message: '手机号不能为空'
},
regexp: {
regexp: /^([0-9]{11})?$/,
message: '手机号码格式错误'
}
}
}, address: {
validators: {
notEmpty: {
message: '地址不能为空'
}, stringLength: {
min: 5,
max: 60,
message: '请输入5到60个字符'
}
}
}, idNo: {
validators: {
notEmpty: {
message: '身份证号不能为空'
},
regexp: {
regexp: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
message: '身份证号码格式错误'
}
}
}
}
});
},
/*重置表单和验证的方法*/
resetValidator(){
//清空验证
$("#applyForm").data('bootstrapValidator').destroy();
$('#applyForm').data('bootstrapValidator',null);
this.bindValidation();//要重新绑定验证
$("#applyForm")[0].reset(); //将表单中的数据也清空
},
/*办理套餐*/
apply(index){
this.resetValidator(); //清空表单及验证
$("#applyPackage").modal("show");
},
/*确认办理套餐*/
doApply(){
//做验证
$("#applyForm").data('bootstrapValidator').validate();
if ($("#applyForm").data('bootstrapValidator').isValid()) {
var self=this;
$.ajax({
url:"/packagePK/package/addOrderPackage",
method:"post",
dataType:"json",
async:false,
data:$("#applyForm").serialize(),
success:function(ret){
mui.alert(ret.msg,function(){
$("#applyPackage").modal("hide");
})
}
})
}
}
},
mounted:function(){
this.bindValidation();
/*//其实清空验证也可以这么写,监听modal消失,注意必须要写在mounted中,不然无效
$('#applyPackage').on('hidden.bs.modal', function() {
$("#applyForm").data('bootstrapValidator').destroy();
$('#applyForm').data('bootstrapValidator',null);
this.bindValidation();//要重新绑定验证
$("#applyForm")[0].reset(); //将表单中的数据也清空
});*/
}
})
总结:
模态框的消失显示 :
$("#modal").modal("show");
$("#modal").modal("hide");
jq清空表单:
$("form")[0].reset();
bootstrapValidator验证步骤:
1.为form绑定验证
$("#applyForm").bootstrapValidator({
message: '输入值不合法',
//excluded: [':disabled', ':hidden', ':not(:visible)'],
live: 'enabled',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
userName: {
message: '用户名不合法',
validators: {
notEmpty: {
message: '用户名不能为空'
},
stringLength: {
min: 2,
max: 4,
message: '请输入2到4个字符'
},
regexp: {
regexp: /^[a-zA-Z0-9_\. \u4e00-\u9fa5 ]+$/,
message: '用户名只能由字母、数字、点、下划线和汉字组成 '
}
}
},
email: {
validators: {
notEmpty: {
message: '邮箱不能为空'
},
emailAddress: {
message: '邮箱地址格式有误'
}
}
}
}
});
验证的类别有:
notEmpty:非空验证;
stringLength:字符串长度验证;
regexp:正则表达式验证;
emailAddress:邮箱地址验证(都不用我们去写邮箱的正则了~~)
最后这种为官方自定义的验证方式,包括邮箱,身份证号,手机号等,不需要自己写正则了
2.验证
$("#applyForm").data('bootstrapValidator').validate();
if ($("#applyForm").data('bootstrapValidator').isValid()) {
var self=this;
$.ajax({
url:"/packagePK/package/addOrderPackage",
method:"post",
dataType:"json",
async:false,
data:$("#applyForm").serialize(),
success:function(ret){
mui.alert(ret.msg,function(){
$("#applyPackage").modal("hide");
})
}
})
}
3.清空验证
$('#applyPackage').on('hidden.bs.modal', function() {//监听modal消失,vue的话必须写在mounted中才有效
$("#applyForm").data('bootstrapValidator').destroy();
$('#applyForm').data('bootstrapValidator',null);
this.bindValidation();//要重新绑定验证
$("#applyForm")[0].reset(); //将表单中的数据也清空
})
4.如果对号和叉号的图标错位,则添加此css自行调整即可
.has-feedback .form-control-feedback {
top: 25px !important;
right: 0;
}