下面是关于Bootstrap表单验证插件bootstrapValidator的完整攻略：
1. 什么是Bootstrap表单验证插件bootstrapValidator
Bootstrap表单验证插件bootstrapValidator是一个基于Bootstrap3的表单验证插件，能够对常见的表单进行简单易用的验证，例如：
- 必填字段验证
- 电子邮件格式验证
- URL地址格式验证
- 手机号码格式验证
- 数字格式验证
- 正则表达式格式验证
- 字符长度验证
- 两个字段是否相等验证
我们可以将其用于网站注册页面、登录页面等需要验证用户信息的场景。
2. 如何使用Bootstrap表单验证插件bootstrapValidator
2.1 引用Bootstrap表单验证插件bootstrapValidator
首先，我们需要在页面中引用相关的JS和CSS文件。在HTML文件的头部中，添加如下代码：
<!-- 引用bootstrap.min.css -->
<link href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- 引用bootstrapValidator.min.css -->
<link href="//cdn.bootcss.com/bootstrapvalidator/0.5.3/css/bootstrapValidator.min.css" rel="stylesheet">
<!-- 引用jquery.min.js -->
<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<!-- 引用bootstrap.min.js -->
<script src="//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- 引用bootstrapValidator.min.js -->
<script src="//cdn.bootcss.com/bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js"></script>
2.2 编写表单代码
在引用所有文件后，我们需要编写表单代码。以下是示例代码：
<form id="myForm" method="post" class="form-horizontal">
<div class="form-group">
<label class="col-sm-3 control-label">用户名：</label>
<div class="col-sm-6">
<input type="text" class="form-control" name="username" placeholder="请输入用户名">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">邮箱：</label>
<div class="col-sm-6">
<input type="email" class="form-control" name="email" placeholder="请输入邮箱" data-bv-emailaddress="true">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">密码：</label>
<div class="col-sm-6">
<input type="password" class="form-control" name="password" placeholder="请输入密码">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">确认密码：</label>
<div class="col-sm-6">
<input type="password" class="form-control" name="confirmPassword" placeholder="请再次输入密码" data-bv-notempty="true" data-bv-identical="true" data-bv-identical-field="password" data-bv-identical-message="两次输入的密码不一致">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-6">
<button type="submit" class="btn btn-primary">注册</button>
</div>
</div>
</form>
其中，id的值为myForm，这是为了在后面调用bootstrapValidator的时候方便选择。
2.3 编写验证规则代码
在表单代码中，我们可以使用一些特性来规定需要验证的数据类型和规则，以下是示例代码：
<input type="email" class="form-control" name="email" placeholder="请输入邮箱" data-bv-emailaddress="true">
其中，data-bv-emailaddress是邮件地址验证特性，表示该输入框数据需要为合法邮件地址。其他验证特性还包括：
data-bv-notempty：非空验证data-bv-integer：整数验证data-bv-regexp：正则表达式验证data-bv-stringlength：字符长度验证data-bv-identical：字段相同验证- ...
2.4 编写BootstrapValidator初始化代码
最后，在需要使用bootstrapValidator验证的地方，添加以下代码：
$(document).ready(function(){
$('#myForm').bootstrapValidator({
message: 'This value is not valid', // 表单验证提示消息
feedbackIcons: { // 图标样式
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
username: { // 输入框name属性
message: '用户名无效', // 验证不通过提示
validators: { // 验证规则
notEmpty: { // 不为空验证
message: '用户名不能为空'
},
stringLength: { // 字符长度验证
min: 6,
max: 18,
message: '用户名长度必须在6到18位之间'
}
}
},
password: {
message: '密码无效',
validators: {
notEmpty: {
message: '密码不能为空'
},
stringLength: {
min: 6,
max: 18,
message: '密码长度必须在6到18位之间'
}
}
},
confirmPassword: {
message: '确认密码无效',
validators: {
notEmpty: {
message: '确认密码不能为空'
},
identical: { // 字段相同验证
field: 'password', // 设置关联字段
message: '两次输入的密码不一致'
}
}
},
email: {
message: '邮箱无效',
validators: {
notEmpty: {
message: '邮箱不能为空'
},
emailAddress: { // 邮件格式验证
message: '邮箱地址格式有误'
}
}
}
}
});
});
其中，#myForm是表单元素的选择器，message是验证结果提示消息，feedbackIcons是验证结果对应的图标样式，fields是各个输入框的相关验证规则。
3. Bootstrap表单验证插件bootstrapValidator的示例
3.1 非空验证示例
<form id="form1" method="post" class="form-horizontal">
<div class="form-group">
<label class="col-md-2 control-label">用户名:</label>
<div class="col-md-6">
<input type="text" class="form-control" name="username" placeholder="请输入用户名" data-bv-notempty="true" data-bv-notempty-message="用户名不能为空">
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<button type="submit" class="btn btn-default">提交</button>
</div>
</div>
</form>
<script>
$(document).ready(function() {
$('#form1').bootstrapValidator();
});
</script>
3.2 正则表达式验证示例
<form id="form2" method="post" class="form-horizontal">
<div class="form-group">
<label class="col-md-2 control-label">电话号码:</label>
<div class="col-md-6">
<input type="text" class="form-control" name="phone" placeholder="请输入11位电话号码" data-bv-regexp="true" data-bv-regexp-regexp="^[1][3,4,5,7,8][0-9]{9}$" data-bv-regexp-message="请输入有效的11位电话号码">
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<button type="submit" class="btn btn-default">提交</button>
</div>
</div>
</form>
<script>
$(document).ready(function() {
$('#form2').bootstrapValidator();
});
</script>
以上就是Bootstrap表单验证插件bootstrapValidator的完整攻略，希望对你有帮助。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Bootstrap中的表单验证插件bootstrapValidator使用方法整理（推荐） - Python技术站
微信扫一扫 
支付宝扫一扫 