bootstrapValidator常用验证规则总结

一 、bootstrapValidator引入

在使用bootstrapValidator前我们需要引入bootstrap和bootstrapValidator对应的js和css文件。

    <link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" th:href="@{bootstarp-validator/bootstrapValidator.css}"/>
<!-- 1、Jquery组件引用 -->
<script src="js/jquery-1.10.2.min.js" th:src="@{/js/jquery-1.10.2.min.js}"></script>
<!-- 2、bootstrap组件引用 -->
<script src="js/bootstrap.min.js" th:src="@{/js/bootstrap.min.js}"></script>
<!-- 3、引入bootstrapValidator的js -->
<script type="text/javascript" th:src="@{bootstarp-validator/bootstrapValidator.js}"></script>
<script type="text/javascript" th:src="@{bootstarp-validator/bootstrapValidator-zh_CN.js}"></script> 二、绑定验证的js代码 在表单中,若对某一字段想添加验证规则,默认需要以<div class="form-group"></div>包裹(对应错误提示会根据该class值定位),内部<input class="form-control" />标签必须有name属性值,此值为验证匹配字段。 <div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<form id="form-wizard" enctype="multipart/form-data"
name="form-wizard" class="form-horizontal">
<div class="form-group">
<label class="control-label col-lg-3" for="username">用户名</label>
<div class="col-lg-6">
<input type="text" class="form-control" name="username" id="username" placeholder="username">
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-3">密码</label>
<div class="col-lg-6">
<input type="password" class="form-control" name="password" />
</div>
</div>
<div class="form-group">
<label class="control-label col-lg-3" for="remark">备注</label>
<div class="col-lg-6">
<input type="text" class="form-control" name="remark" placeholder="remark">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" id="saveButton">提交</button>
</div>
</div>
</div>
$(function() {
$('#form-wizard').bootstrapValidator({
excluded: [':disabled', ':hidden', ':not(:visible)'],//默认指定不验证的情况
message : 'This value is not valid',
feedbackIcons : {
valid : 'glyphicon glyphicon-ok',
invalid : 'glyphicon glyphicon-remove',
validating : 'glyphicon glyphicon-refresh'
},
fields : {
username: { /*键名username和input name值对应*/
message: '用户名不能为空',
validators: {
notEmpty: { /*非空提示*/
message: '用户名必填不能为空'
},
stringLength: { /*长度提示*/
min: 6,
max: 30,
message: '用户名长度不能小于6位或超过30位'
},
regexp: { /*正则校验*/
regexp: /^[a-zA-Z0-9_\.]+$/,
message: '用户名只能由字母、数字、点和下划线组成。'
},
}
},
password: {
message:'密码无效',
validators: {
notEmpty: {
message: '密码不能为空'
},
stringLength: {
min: 6,
max: 30,
message: '密码长度必须在6到30之间'
}
}
},
remark : {
validators : {
notEmpty : {
message : '备注必填'
},
stringLength : {
min : 2,
max : 200,
message : '备注长度必须2-200字符'
}
}
},
}
});
//提交按钮,所有验证通过方可提交
$("#saveButton").click(
function() {
var flag = $('#form-wizard').bootstrapValidator(
'validate').data('bootstrapValidator').isValid();
if (flag) {
alert("校验通过");
}
});
}); bootstrapValidator默认配置对于“隐藏域(:hidden)、禁用域(:disabled)、不可见域(:not (visible))”是不进行验证的。通过excluded: [':disabled']配置,表示只对于禁用域不进行验证,其他的表单元素都要验证 。 三.在validators中一些验证规则的总结 1.判断字段是否为空 notEmpty: {
message: '用户名必填不能为空'
}, 2.字段长度判断 stringLength: {
min: 6,
max: 30,
message: '长度不能小于6位或超过30位'
}, 3.通过正则表达式进行验证 regexp: {
regexp: /^[A-Z\s]+$/i,
message: '只能由字母字符和空格组成。'
}, 4.大小写验证 stringCase: {
message: '姓氏必须只包含大写字符。',
case: 'upper'//其他值或不填表示只能小写字符
}, 5.两个字段不相同的判断 different: {
field: 'password',
message: '用户名和密码不能相同。'
}, 6.email验证 emailAddress: {
message: 'The input is not a valid email address'
}, 7.日期格式验证 date: {
format: 'YYYY/MM/DD',
message: '日期无效'
}, 8.纯数字验证 digits: {
message: '该值只能包含数字。'
}, 9.ajax验证 threshold : 6 , //有6字符以上才发送ajax请求,(input中输入一个字符,插件会向服务器发送一次,设置限制,6字符以上才开始)
remote: {//ajax验证。server result:{"valid",true or false} 向服务发送当前input name值,获得一个json 数据。例表示正确:{"valid",true}
url: 'exist2.do',//验证地址
message: '用户已存在',//提示消息
delay : 2000,//每输入一个字符,就发ajax请求,服务器压力还是太大,设置2秒发送一次ajax(默认输入一个字 符,提交一次,服务器压力太大)
type: 'POST'//请求方式
}, 10.复选框验证 choice: {
min: 2,
max: 4,
message: '请选择2-4项'
}, 11.密码确认 identical: {
field: 'password', //指定控件name
message: 'The password and its confirm are not the same'
}, 12.判断输入数字是否符合大于等于18并且小于等于65 greaterThan: {
value: 18
},
lessThan: {
value: 65
} 13.校验文件类型大小 file: {
extension: 'zip,doc,docx,pdf,txt',
maxSize: 1024*5,
minSize: 1024,
message: '仅支持大小在1M~5M之间,类型是zip,doc,docx,pdf,txt的文件!'
// type: 'type' 支持MIME type
}, 14.callback回调函数验证文件类型大小 <form id="form-wizard" enctype="multipart/form-data" name="form-wizard" class="form-horizontal">
<div class="form-group">
<label for="file" class="control-label col-lg-3">上传文件</label>
<div class="col-lg-6">
<input id="fileuploadeId" type="file" name="file" class="upload" />
<input id="fileSizeId" type="hidden" name="fileSize" />
</div>
</div>
</form>
<script th:inline="javascript">
$(function() {
var test = document.getElementById('fileuploadeId');
test.addEventListener('change', function() {
var fileSizes=this.files[0].size;
$('#fileSizeId').val(fileSizes);
}, false);
$('#form-wizard').bootstrapValidator(
{
message : 'This value is not valid',
feedbackIcons : {
valid : 'glyphicon glyphicon-ok',
invalid : 'glyphicon glyphicon-remove',
validating : 'glyphicon glyphicon-refresh'
},
fields : {
file: { /*键名file和input name值对应*/
validators: {
notEmpty: {
message: '文件上传为必填'
},
file: {
extension: 'zip',
message: '请选择zip类型附件'
},
callback: {
callback: function(value, validator,$filed) {
var element = $("#form-wizard").data("bootstrapValidator").getFieldElements('fileSize');
var size = element.val();
if(size>10*1024){ //比较文件大小
return {
valid: false,
message: '文件过大,请重新选择'
}
}
return true;
}
}
}
}
}
});
</script> 效果展示: 密码:aaaaa 确认密码:aaaaa
bootstrapValidator常用验证规则总结-LMLPHP
15.bootstrap 日期控件起始日期&结束日期相互约束

使用bootstrap的日期控件需要单独引入bootstrap-datetimepicker.min.css和bootstrap-datetimepicker.min.js

    <input size="20" type="text" id="datetimeStart" class="form_datetime" readonly/>
<input size="20" type="text" id="datetimeEnd" class="form_datetime" readonly/>
<script type="text/javascript">
$("#datetimeStart").datetimepicker({
format: 'yyyy-mm-dd',
minView:'month',
language: 'zh-CN',
autoclose:true,
startDate:new Date()
}).on("click",function(){
$("#datetimeStart").datetimepicker("setEndDate",$("#datetimeEnd").val());
});
$("#datetimeEnd").datetimepicker({
format: 'yyyy-mm-dd',
minView:'month',
language: 'zh-CN',
autoclose:true,
startDate:new Date()
}).on("click",function(){
$("#datetimeEnd").datetimepicker("setStartDate",$("#datetimeStart").val());
});
</script> 四、常用事件 1、重置某一单一验证字段验证规则 $(formName).data("bootstrapValidator").updateStatus("fieldName", "NOT_VALIDATED", null); 2、重置表单所有验证规则 $(formName).data("bootstrapValidator").resetForm(); 3、手动触发表单验证 //触发全部验证
$(formName).data("bootstrapValidator").validate();
//触发指定字段的验证
$(formName).data("bootstrapValidator").validateField('fieldName'); 4、获取当前表单验证状态 // flag = true/false
var flag = $(formName).data("bootstrapValidator").isValid(); 5、根据指定字段名称获取验证对象 // element = jq对象
var element = $(formName).data("bootstrapValidator").getFieldElements('fieldName'); 五、相关文档和技术网站小结
https://github.com/wenzhixin/bootstrap-table http://bootstrapvalidator.votintsev.ru/getting-started/ http://bootstrapvalidator.votintsev.ru/api/ http://www.bootcdn.cn/bootstrap-validator/ http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm
04-21 02:49