基于bootstrap的表单验证插件使用简介
最近做bootstrap表单验证时，在http://www.jqcool.net/jquery-bootstrapvalidator.html发现bootstrapvalidator。试用了一下，感觉很棒！
环境搭建
1.1 引入css文件，先引入bootstrap的css文件
<link rel="stylesheet" href="../vendor/bootstrap/css/bootstrap.css"/>
<link rel="stylesheet" href="../dist/css/bootstrapValidator.css"/>
1.2 <script type="text/javascript" src="../dist/js/bootstrapValidator.js"></script>
2.1 引入js文件，先引入jquery库，再引入bootstrapjs，最后引入验证插件
<script type="text/javascript" src="../vendor/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="../vendor/bootstrap/js/bootstrap.min.js"></script>
2.插件的使用
$('#defaultForm').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
username: {
message: 'The username is not valid',
validators: {
notEmpty: {
message: 'The username is required and can\'t be empty'
},
stringLength: {
min: 6,
max: 30,
message: 'The username must be more than 6 and less than 30 characters long'
},
regexp: {
regexp: /^[a-zA-Z0-9_\.]+$/,
message: 'The username can only consist of alphabetical, number, dot and underscore'
}
}
},
country: {
validators: {
notEmpty: {
message: 'The country is required and can\'t be empty'
}
}
},
acceptTerms: {
validators: {
notEmpty: {
message: 'You have to accept the terms and policies'
}
}
},
email: {
validators: {
notEmpty: {
message: 'The email address is required and can\'t be empty'
},
emailAddress: {
message: 'The input is not a valid email address'
}
}
},
website: {
validators: {
uri: {
allowLocal: true,
message: 'The input is not a valid URL'
}
}
},
phoneNumberUS: {
validators: {
phone: {
message: 'The input is not a valid US phone number'
}
}
},
phoneNumberUK: {
validators: {
phone: {
message: 'The input is not a valid UK phone number',
country: 'GB'
}
}
},
color: {
validators: {
hexColor: {
message: 'The input is not a valid hex color'
}
}
},
zipCode: {
validators: {
zipCode: {
country: 'US',
message: 'The input is not a valid US zip code'
}
}
},
password: {
validators: {
notEmpty: {
message: 'The password is required and can\'t be empty'
},
identical: {
field: 'confirmPassword',
message: 'The password and its confirm are not the same'
}
}
},
confirmPassword: {
validators: {
notEmpty: {
message: 'The confirm password is required and can\'t be empty'
},
identical: {
field: 'password',
message: 'The password and its confirm are not the same'
}
}
},
ages: {
validators: {
lessThan: {
value: 100,
inclusive: true,
message: 'The ages has to be less than 100'
},
greaterThan: {
value: 10,
inclusive: false,
message: 'The ages has to be greater than or equals to 10'
}
}
}
}
});
1） defaultForm是表单的id
2） feedbackIcons图标，如验证通过，验证为通过，正在验证
3) fields属性集合,它下面写的是表单元素的name属性值
3.常用验证器
3.1非空验证其- notEmpty
Eg:
notEmpty: {
message: 'The username is required and can\'t be empty'
}
3.2 字符串长度验证器- stringLength
Eg:
stringLength: {
min: 6,
max: 30,
message: 'The username must be more than 6 and less than 30 characters long'
}
3.3 正则表达式- regexp
Eg:
regexp: {
regexp: /^[a-zA-Z0-9_\.]+$/,
message: 'The username can only consist of alphabetical, number, dot and underscore'
}
3.4 邮箱验证- emailAddress
Eg:
emailAddress: {
message: 'The input is not a valid email address'
}
3.5 url验证- uri
Eg:
uri: {
allowLocal: true,
message: 'The input is not a valid URL'
}
3.6 手机号验证- phone 目前不支持中国的手机号验证
Eg:
phone: {
message: 'The input is not a valid US phone number',
country: 'GB'
}
3.7 float验证-numeric
Eg:
numeric:{
messge:’ Please enter a valid float number’
}
3.8 远程验证—remote 如手机号的唯一验证
Eg:
remote:{
url:’远程验证地址’,
message:’’
}
3.9 字符串长度验证-stringLength
Eg:
stringLength:{
min:9,
max:18,
message:’ Please enter value between %s and %s characters long’
}
3.10 数值范围验证-between
Eg:
between:{
min:9,
max:18,
message:’ Please enter a value between %s and %s’
}
3.11 表单回掉函数验证- callback
Eg:
Callback：{
callback:’’,//回掉函数名
message:’Please enter a valid value’
}
3.12 选项个数范围- choice
Eg:
choice:{
min:2,
max:10,
message:’please choose %s-%s option’
}
3.13 日期验证- date
Eg:
date：{
format:’’,
message:’please enter a valid date’
}
3.14 不相同值验证- different
Eg:
different:{
field:’’,//要比较的目标字段 表单元素的name
message:’please enter a different value ’
}
3.15 纯数字验证- digits
Eg:
digits：{
message:’ Please enter only digits’
}
3.16 文件验证- file
Eg:
File:{
maxsize:’’,//最大
type:’’,//文件类型
message:’’//消息
}
3.17 全球版本标识符验证-grid
Eg:
grid:{
message:’’
}
3.18 进制数验证- hex
Eg:
hex:{
message:’’
}
3.19 进制颜色- hexColor
Eg:用法同上
3.20 相同值验证- identical
Eg:
identical:{
field:’’,//表单name
message:’’
}
3.21 国际移动设备身份验证- imei
Eg:用法同hex
3.22 整数验证- integer
Eg：用法同hex
3.23 ip验证-ip
Eg:
ip:{
ipv4:true,//默认true
ipv6:false,//默认true
message:’’
}
3.24 至少- lessThan
Eg:
lessThan:{
message:’ Please enter a value less than or equal to %s’,
value:’’
}
3.25 mac地址- mac
Eg:
mac:{
message:’’
}