bootstrapValidator是一款不错的表单验证的插件，本篇文章简单介绍了这款插件的使用，需要的朋友可以参考一下。下载实例
1、引入需要的css和js
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrapValidator.min.css"/>
<script type="text/javascript" src="bootstrap/js/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrapValidator.min.js"></script>
2、编写html
如果想对某一个字段添加验证规则，需要<div class="form-group"></div>包裹（对应的错误提示会根据class值来定位），input标签必须有name值，此值为验证匹配的字段。
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input type="text" class="form-control" placeholder="用户名" name="username" />
</div>
</div>
3、添加验证规则
$(function(){
//初始化input状态样式图标
var icon = {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
};
//初始化验证规则
$("form").bootstrapValidator({
feedbackIcons: icon, //加载图标
/* 生效规则
* enabled:字段值发生变化就触发验证
* disabled/submitted:点击提交时触发验证
*/
live: 'disabled',
//表单域配置
fields: {
username: {//username为input标签name值
validators: {
notEmpty: {message: '请输入用户名'}, //非空提示
stringLength: { //长度限制
min: 6,
max: 30,
message: '用户名长度必须在6到30之间'
},
regexp: {//匹配规则
regexp: /^[a-zA-Z0-9_\\u4e00-\\u9fa5]+$/, //正则表达式
message:'用户名仅支持汉字、字母、数字、下划线的组合'
},
remote: { //ajax校验，获得一个json数据（{'valid': true or false}）
url: 'user.php', //验证地址
message: '用户已存在', //提示信息
type: 'POST', //请求方式
data: function(validator){ //自定义提交数据，默认为当前input name值
return {
act: 'is_registered',
username: $("input[name='username']").val()
}
}
}
}
},
password: {
validators: {
notEmpty: {message: '请输入密码'},
different: { //比较
field: 'username', //需要进行比较的input name值
message: '密码不能与用户名相同'
}
}
},
confirm_password: {
validators: {
notEmpty: {message: '请再次输入密码'},
identical: { //比较是否相同
field: 'password', //需要进行比较的input name值
message: '两次密码不一致'
}
}
},
email: {
validators: {
notEmpty: {message: '请输入邮箱'},
emailAddress: {message: '请输入正确的邮件地址'}
}
} //最后一个没有逗号
}
})
});
效果图：
图片1
图片2
其他常见的验证类型：
- between: 验证输入值必须在某一个范围值内
- creditCard: 身份证验证
- date: 日期验证
- ip: IP地址验证
- numeric: 数值验证
- phone: 电话号码验证
更多验证类型详见：http://bv.doc.javake.cn/validators/
