bootstrapvalidator模态框表单验证

最新推荐文章于 2022-11-23 09:41:11 发布

原创最新推荐文章于 2022-11-23 09:41:11 发布 · 963 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

bootstrap 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一个使用Bootstrap和Bootstrap Validator实现的模态框相册创建功能，包括表单验证和响应式设计。展示了如何设置模态框，定义表单元素，并使用JS代码进行输入验证。

需要引入的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>

页面代码

	<div class="modal fade" id="mymodal"> // 模态框
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="modal-title" style="font-family: cursive;">新建相册</h4>
				</div>
				<div class="modal-body">
					<form class="form-horizontal" role="form" id="modalform"
						autocomplete="off">
						<div class="row">
							<div class="col-md-12">
								<div class="form-group">
									<label for="field-3" class="control-label">添加相册名称</label> <input
										type="text" class="form-control" id="uploadalbum"
										name="uploadalbum" placeholder="相册名称">
								</div>
							</div>
						</div>
						<div class="row">
							<div class="col-md-12">
								<div class="form-group">
									<label for="field-4" class="control-label">权限</label> <select
										class="form-control" id="power" name="power">
										<option value="0">公开</option>
										<option value="1">仅自己可见</option>
									</select>
								</div>
							</div>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
							<button type="button" class="btn btn-info" onclick="savealbum()">保存</button>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>

新建的js代码

$(document).ready(function() {
	$('#modalform').bootstrapValidator({
		message : '输入值不合法',
		feedbackIcons : {
			valid : 'glyphicon glyphicon-ok',
			validating : 'glyphicon glyphicon-refresh'
		},
		fields : {
			uploadalbum : {
				message : '相册名称不能为空',
				validators : {
					notEmpty : {
						message : '相册名称不能为空'
					},
					stringLength : {
						min : 1,
						max : 18,
						message : '请输入1到18个字符'
					},
					regexp : {
						regexp : /^[a-zA-Z0-9_\. \u4e00-\u9fa5 ]+$/,
						message : '相册名称只能由字母、数字、点、下划线和汉字组成 '
					}
				}
			}
		}
	});
})

function savealbum() {
	    var mymodal = $('#mymodal');
		var bootstrapValidator = $("#modalform").data("bootstrapValidator");
		bootstrapValidator.validate();
		if (bootstrapValidator.isValid()) { // 模态框是否通过验证
			mymodal.modal('hide');
	}

}

效果图