一.首先引入BootstrapValidator插件
- BootstrapValidator插件需要jQuery和Bootstrap 3
- 引入js和css文件
<link rel="stylesheet" href="/path/to/bootstrap/css/bootstrap.css"/>
<link rel="stylesheet" href="/path/to/dist/css/bootstrapValidator.min.css"/>
<script type="text/javascript" src="/path/to/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/path/to/bootstrap/js/bootstrap.min.js"></script>
<!-- 使用壓縮過(guò)的版本-->
<script type="text/javascript" src="/path/to/dist/js/bootstrapValidator.min.js"></script>
<!-- 使用包含所有驗(yàn)證器的未壓縮版本 -->
<script type="text/javascript" src="/path/to/dist/js/bootstrapValidator.js"></script>
二.添加驗(yàn)證規(guī)則
1.使用HTML添加簡(jiǎn)單驗(yàn)證
- 如果想對(duì)某一個(gè)字段添加驗(yàn)證規(guī)則啦租，需要<div class="form-group"></div>包裹季春，input標(biāo)簽必須有name值，此值為驗(yàn)證匹配的字段冒窍。其實(shí)就是要符合bootstrap表單結(jié)構(gòu)
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" name="email" class="form-control" id="exampleInputEmail1" placeholder="Email"
data-bv-notempty="true"
data-bv-notempty-message="不能為空">
</div>
初始化bootstrapValidator，submitHandler 屬性后面會(huì)介紹到
$('#AppForm').bootstrapValidator({
submitHandler: function (validator, form, submitButton) {
// validator: 表單驗(yàn)證實(shí)例對(duì)象
// form jq對(duì)象 指定表單對(duì)象
// submitButton jq對(duì)象 指定提交按鈕的對(duì)象
var tourl="{:U('Admin/User/userSet')}";
var data=$('#AppForm').serialize();
var id = $('input[name=id]').val();
// 使用ajax發(fā)送表達(dá)數(shù)據(jù)
$.App.ajax('post',tourl,data,null);
return false;
}
})
使用data-bv-notempty 和 data-bv-notempty-message屬性就可以簡(jiǎn)單進(jìn)行非空驗(yàn)證减响。data-bv-notempty 有值就進(jìn)行非空驗(yàn)證脚囊，data-bv-notempty-message 中的值為提示消息
2.使用js添加驗(yàn)證
- 簡(jiǎn)述 bootstrapValidator 使用方法。想查看更多可以訪問(wèn)http://bootstrapvalidator.votintsev.ru/getting-started/ 查看文檔
$('form').bootstrapValidator({
// 默認(rèn)的提示消息
message: 'This value is not valid',
// 表單框里右側(cè)的icon
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
submitHandler: function (validator, form, submitButton) {
// 表單提交成功時(shí)會(huì)調(diào)用此方法
// validator: 表單驗(yàn)證實(shí)例對(duì)象
// form jq對(duì)象 指定表單對(duì)象
// submitButton jq對(duì)象 指定提交按鈕的對(duì)象
},
fields: {
username: {
message: '用戶名驗(yàn)證失敗',
validators: {
notEmpty: {
message: '用戶名不能為空'
},
stringLength: { //長(zhǎng)度限制
min: 6,
max: 18,
message: '用戶名長(zhǎng)度必須在6到18位之間'
},
regexp: { //正則表達(dá)式
regexp: /^[a-zA-Z0-9_]+$/,
message: '用戶名只能包含大寫(xiě)芦拿、小寫(xiě)士飒、數(shù)字和下劃線'
},
different: { //比較
field: 'username', //需要進(jìn)行比較的input name值
message: '密碼不能與用戶名相同'
},
identical: { //比較是否相同
field: 'password', //需要進(jìn)行比較的input name值
message: '兩次密碼不一致'
},
remote: { // ajax校驗(yàn)查邢，獲得一個(gè)json數(shù)據(jù)（{'valid': true or false}）
url: 'user.php', //驗(yàn)證地址
message: '用戶已存在', //提示信息
type: 'POST', //請(qǐng)求方式
data: function(validator){ //自定義提交數(shù)據(jù)，默認(rèn)為當(dāng)前input name值
return {
act: 'is_registered',
username: $("input[name='username']").val()
};
}
}
}
},
email: {
validators: {
notEmpty: {
message: '郵箱地址不能為空'
},
emailAddress: {
message: '郵箱地址格式有誤'
}
}
}
}
});
可以看到酵幕，validators屬性對(duì)應(yīng)一個(gè)Json對(duì)象扰藕，里面可以包含多個(gè)驗(yàn)證的類(lèi)型。我在 username 的 validators 里添加了很多屬性芳撒，這些都是一些常用的屬性方法邓深，按需添加。
我自定義的正則校驗(yàn)笔刹，??與上面代碼不是對(duì)應(yīng)的芥备，大家自己根據(jù)自己需求寫(xiě)正則
上面代碼中 emailAddress 是郵箱地址驗(yàn)證，都不用我們?nèi)?xiě)郵箱的正則了徘熔。除此之外還有46個(gè)其他的驗(yàn)證類(lèi)型门躯，大家自己去看文檔。再貼幾個(gè)常見(jiàn)的酷师。
- between: 驗(yàn)證輸入值必須在某一個(gè)范圍值內(nèi)讶凉，比如大于1小于10
- creditCard: 身份證驗(yàn)證
- date: 日期驗(yàn)證
- ip: IP地址驗(yàn)證
- numeric: 數(shù)值驗(yàn)證
- phone: 電話號(hào)碼驗(yàn)證
- url驗(yàn)證
