bootstrap插件bootstrapValidator常⽤验证规则总结⼀ :bootstrapValidator引⼊
在使⽤bootstrapValidator前我们需要引⼊bootstrap和bootstrapValidator对应的js和css⽂件。
<!--jquery-->
<script type="text/javascript"src="Public/js/jquery-3.2.1.js"></script>
<!--bootstrap-->
<link rel="stylesheet"type="text/css"href="Public/css/bootstrap-theme.min.css">
<link rel="stylesheet"type="text/css"href="Public/css/bootstrap.min.css">
<link rel="stylesheet"type="text/css"href="Public/css/bootstrapValidator.css">
<script type="text/javascript"src="Public/js/bootstrap.js"></script>
<script type="text/javascript"src="Public/js/bootstrapValidator.js"></script>
⼆：绑定验证的js代码
<form class="form-horizontal center-block" id="form_test">
<div class="form-group">
<label class="col-sm-2 control-label"for="des">⽤户名</label>
<div class="col-xs-4">
<input type="text"class="form-control" name="username" id="username" placeholder="username">            </div>
</div>
<div class="form-group ">
<label class=" control-label col-sm-2" ></label>
<div class="col-xs-4">
<button type="submit"class="btn btn-primary">提交</button>
<button type="reset"class="btn btn-default">清空</button>
</div>
</div>
</form>
$(document).ready(function() {
$('#form_test').bootstrapValidator({
message: 'This value is not valid',
//excluded:[":hidden",":disabled",":not(visible)"] ,//bootstrapValidator的默认配置
excluded: ':disabled',//关键配置，表⽰只对于禁⽤域不进⾏验证，其他的表单元素都要验证
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',//显⽰验证成功或者失败时的⼀个⼩图标
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
username: {
message: '⽤户名不能为空',//默认提⽰信息
validators: {
notEmpty: {
message: '⽤户名必填不能为空'
},
stringLength: {
min: 6,
max: 30,
message: '⽤户名长度不能⼩于6位或超过30位'
},
regexp: {
regexp: /^[a-zA-Z0-9_\.]+$/,
message: '⽤户名只能由字母、数字、点和下划线组成。'
},
}
}
}
}).on('error.form.bv', function(e) {
console.log('error');
// Active the panel element containing the first invalid element
var $form        = $(e.target),
validator    = $form.data('bootstrapValidator'),
$invalidField = InvalidFields().eq(0),
$collapse    = $invalidField.parents('.collapse');
$llapse('show');
});
});
三.在validators中⼀些验证规则的总结
1.判断字段是否为空
notEmpty: {
message: '⽤户名必填不能为空'
},
2.字段长度判断
stringLength: {
min: 6,
max: 30,
message: '⽤户名长度不能⼩于6位或超过30位'
},
3.通过正则表达式进⾏验证
regexp: {
regexp: /^[A-Z\s]+$/i,
message: '名字只能由字母字符和空格组成。'
}
4.⼤⼩写验证
stringCase: {
message: '姓⽒必须只包含⼤写字符。',
jquery怎么进行验证case: 'upper'//其他值或不填表⽰只能⼩写字符
},
5.两个字段不相同的判断
different: {
field: 'password',
message: '⽤户名和密码不能相同。'
}
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: 'confirmPassword',
message: 'The password and its confirm are not the same'
},
12.判断输⼊数字是否符合⼤于18⼩于100
greaterThan: {
value: 18
},
lessThan: {
value: 100
}
13.uri验证
uri: {}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。