bootstrap modal模态框以及bootstrapValidator使用，清空，重置

最近看了手机端表现好的模态框，比较了mui，layui-mobile，和bootstrap的modal，最后觉得还是bootstrap最好用我用的是vue项目首先分别引入bootstrap和bootstrapValidator<head><meta charset="UTF-8"><meta name=&qu

豆趣编程

4897人浏览 · 2018-08-09 11:24:53

豆趣编程 · 2018-08-09 11:24:53 发布

最近看了手机端表现好的模态框，比较了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">&times;</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;
			}

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

Vue

echarts堆叠柱状图

Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

Vue

所有评论(0)

查看更多评论

豆趣编程

@lianzhang861

已为社区贡献4条内容