bootstrapValidator常用验证规则总结 一 、bootstrapValidator引入 在使用bootstrapValidator前我们需要引入bootstrap和bootstrapValidator对应的js和css文件。 <link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" 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="@{js/bootstraptable/bootstrapValidator.js}"></script> 二、绑定验证的js代码 <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" id="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("校验通过"); } }); });
注意:
三.在validators中一些验证规则的总结
1.判断字段是否为空 notEmpty: { message: '用户名必填不能为空' }, 2.字段长度判断 stringLength: { min: 6, max: 30, message: '长度不能小于6位或超过30位' }, 3.通过正则表达式进行验证 regexp: { regexp: /^[A-Zs]+$/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 } 四、常用事件 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对象 / null var element = $(formName).data(“bootstrapValidator”).getFieldElements('fieldName');
学习 :http://www.bootcdn.cn/
http://bootstrapvalidator.votintsev.ru/getting-started/
相关链接: https://blog.csdn.net/u013938465/article/details/53507109
https://blog.csdn.net/qq_26431469/article/details/52022345
对隐藏域值校验: https://blog.csdn.net/zsg88/article/details/72597956