bootstrap 的表单验证插件。
用法：
一、引入文件
<script src="js/jquery-1.11.3.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="bootstrapValidator.js"></script>
<link href="css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="bootstrapValidator.css">
二、form 表单
<form id=“yanzheng”>
<div class="form-group">
<label class="control-label">用户名</label>
<input type="text" class="form-control" name="username"/>
</div>
<div class="form-group">
<button type="submit" name="submit" class="btn btn-primary">Submit</button>
</div>
</form>
注意：
1、 默认需要以<div class=”form-group”></div>包裹
2、<input class="form-control" >标签必须有name属性值，根据name校验相应的控件
二、js 写法
<script>
$(function () {
$('#yanzheng').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
username: { //input中的name属性
message: '用户名验证失败',
validators: {
notEmpty: {
message: '用户名不能为空'
},
stringLength:{
min:6,
max:12,
message:"长度必须在6~12位之间"
},
regexp:{
regexp:/^[a-zA-Z0-9_]+$/,
message:"用户名只能包含大写、小写、数字和下划线"
},
emailAddress:{
message:"邮箱格式有误！"
},
different: {//不能与指定文本相同
field: '指定文本框name',
message: '不能与指定文本框内容相同'
},
identical: { //校验两次密码一致性
field: 'password',//校验上次密码 的name值
message: '两次密码不一致'
},
remote: {//将内容发送至指定页面验证，返回验证结果，比如查询用户名是否存在
url: '指定页面',
message: 'The username is not available'
},
date: {//验证指定的日期格式
format: 'YYYY/MM/DD',
message: '日期格式不正确'
},
choice: {//check控件复选框选择的数量
min: 2,
max: 4,
message: '必须选择2-4个选项'
}
}
},
username:{
message: '用户名验证失败',
validators:{}
}
},
});
});
</script>
