在使用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>
<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 = validator.getInvalidFields().eq(0),
$collapse = $invalidField.parents('.collapse');
$collapse.collapse('show');
});
});
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: 'confirmPassword',
message: 'The password and its confirm are not the same'
},
12.判断输入数字是否符合大于18小于100
greaterThan: {
value: 18
},
lessThan: {
value: 100
}
13.uri验证
uri: {}