基於bootstrap的表單驗證插件使用簡介
最近作bootstrap表單驗證時，在http://www.jqcool.net/jquery-bootstrapvalidator.html發現bootstrapvalidator。試用了一下，感受很棒！javascript
環境搭建css
1.1 引入css文件，先引入bootstrap的css文件html
<link rel="stylesheet" href="../vendor/bootstrap/css/bootstrap.css"/>java
<link rel="stylesheet" href="../dist/css/bootstrapValidator.css"/>jquery
1.2 <script type="text/javascript" src="../dist/js/bootstrapValidator.js"></script>git
2.1 引入js文件，先引入jquery庫，再引入bootstrapjs，最後引入驗證插件web
<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>bootstrap
2.插件的使用less
$('#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:{
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:’’
}
- 1. 基於vue.js 2.0表單驗證vuelidate插件介紹及使用
- 2. 簡單的表單驗證插件（Jquery）
- 3. 基於jquery、bootstrap的數據驗證插件bootstrapValidator使用
- 4. Bootstrap表單驗證插件bootstrapValidator使用方法整理
- 5. js插件使用：jQuery-Validate 表單驗證插件的使用
- 6. 使用jQuery validate插件驗證表單
- 7. jquery表單驗證使用插件formValidator
- 8. bootstrap表單驗證
- 9. bootstrap 表單驗證
- 10. BootstrapValidator，最好用的bootstrap表單驗證插件
- 更多相關文章...
- • PHP 表單驗證 - PHP教程
- • PHP 表單 - 驗證郵件和URL - PHP教程
- • ☆基於Java Instrument的Agent實現
- • Java Agent入門實戰（一）-Instrumentation介紹與使用
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 安裝cuda+cuDNN
- 2. GitHub的使用說明
- 3. phpDocumentor使用教程【安裝PHPDocumentor】
- 4. yarn run build報錯Component is not found in path 「npm/taro-ui/dist/weapp/components/rate/index「
- 5. 精講Haproxy搭建Web集羣
- 6. 安全測試基礎之MySQL
- 7. C/C++編程筆記：C語言中的複雜聲明分析，用實例帶你完全讀懂
- 8. Python3教程(1)----搭建Python環境
- 9. 李宏毅機器學習課程筆記2：Classification、Logistic Regression、Brief Introduction of Deep Learning
- 10. 阿里雲ECS配置速記
- 1. 基於vue.js 2.0表單驗證vuelidate插件介紹及使用
- 2. 簡單的表單驗證插件（Jquery）
- 3. 基於jquery、bootstrap的數據驗證插件bootstrapValidator使用
- 4. Bootstrap表單驗證插件bootstrapValidator使用方法整理
- 5. js插件使用：jQuery-Validate 表單驗證插件的使用
- 6. 使用jQuery validate插件驗證表單
- 7. jquery表單驗證使用插件formValidator
- 8. bootstrap表單驗證
- 9. bootstrap 表單驗證
- 10. BootstrapValidator，最好用的bootstrap表單驗證插件