bootstrapValidator常用验证规则总结
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-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 } 四、常用事件 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