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
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