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
如果想對某一個字段添加驗證規(guī)則女淑，需要<div class="form-group"></div>包裹（對應(yīng)的錯誤提示會根據(jù)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屈张、添加驗證規(guī)則
$(function(){
//初始化input狀態(tài)樣式圖標
var icon = {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
};
//初始化驗證規(guī)則
$("form").bootstrapValidator({
feedbackIcons: icon, //加載圖標
/* 生效規(guī)則
* enabled:字段值發(fā)生變化就觸發(fā)驗證
* disabled/submitted:點擊提交時觸發(fā)驗證
*/
live: 'disabled',
//表單域配置
fields: {
username: {//username為input標簽name值
validators: {
notEmpty: {message: '請輸入用戶名'}, //非空提示
stringLength: { //長度限制
min: 6,
max: 30,
message: '用戶名長度必須在6到30之間'
},
regexp: {//匹配規(guī)則
regexp: /^[a-zA-Z0-9_\\u4e00-\\u9fa5]+$/, //正則表達式
message:'用戶名僅支持漢字擒权、字母、數(shù)字阁谆、下劃線的組合'
},
remote: { //ajax校驗碳抄，獲得一個json數(shù)據(jù)（{'valid': true or false}）
url: 'user.php', //驗證地址
message: '用戶已存在', //提示信息
type: 'POST', //請求方式
data: function(validator){ //自定義提交數(shù)據(jù)，默認為當(dāng)前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: 驗證輸入值必須在某一個范圍值內(nèi)
- creditCard: 身份證驗證
- date: 日期驗證
- ip: IP地址驗證
- numeric: 數(shù)值驗證
- phone: 電話號碼驗證
更多驗證類型詳見：http://bv.doc.javake.cn/validators/
