前言：做Web開發(fā)的我們，表單驗(yàn)證是再常見不過的需求了。友好的錯(cuò)誤提示能增加用戶體驗(yàn)。博主搜索bootstrap表單驗(yàn)證，搜到的結(jié)果大部分都是文中的主題：bootstrapvalidator。今天就來看看它如何使用吧。
網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)！專注于網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、小程序設(shè)計(jì)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了麥蓋提免費(fèi)建站歡迎大家使用！
一、源碼及API地址
介紹它之前，還是給出它的源碼以及API的地址吧。
bootstrapvalidator源碼：https://github.com/nghuuphuoc/bootstrapvalidator
boostrapvalidator api：http://bv.doc.javake.cn/api/
二、代碼以及效果展示
1、初級(jí)用法
來看bootstrapvalidator的描述：A jQuery form validator for Bootstrap 3。從描述中我們就可以知道它至少需要jQuery、bootstrap的支持。我們首先引入需要的js組件
我們知道，既然是表單驗(yàn)證，那么我們在cshtml頁面就必須要有一個(gè)Form，并且我們知道Form里面取元素都是通過name屬性去取值的，所以，表單里面的元素都要有一個(gè)name的屬性值。
有了表單元素之后，就是我們的js初始化了。
重慶分公司
重慶分公司
$(function () {
$('form').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
username: {
message: '用戶名驗(yàn)證失敗',
validators: {
notEmpty: {
message: '用戶名不能為空'
}
}
},
email: {
validators: {
notEmpty: {
message: '郵箱地址不能為空'
}
}
}
}
});
});內(nèi)容應(yīng)該很容易看懂。來看效果：
驗(yàn)證通不過，提交按鈕灰掉不能點(diǎn)擊
驗(yàn)證通過，提交按鈕恢復(fù)
看看效果先感受下，最大優(yōu)點(diǎn)：使用簡單，界面友好。下面我們來看看重疊驗(yàn)證。
2、中級(jí)用法
上面我們知道了非空驗(yàn)證的寫法，除此之外肯定還有其他驗(yàn)證方式啊。別急，我們慢慢來看。上面的代碼cshtml部分不動(dòng)，js部分我們稍作修改：
$(function () {
$('form').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
username: {
message: '用戶名驗(yàn)證失敗',
validators: {
notEmpty: {
message: '用戶名不能為空'
},
stringLength: {
min: 6,
max: 18,
message: '用戶名長度必須在6到18位之間'
},
regexp: {
regexp: /^[a-zA-Z0-9_]+$/,
message: '用戶名只能包含大寫、小寫、數(shù)字和下劃線'
}
}
},
email: {
validators: {
notEmpty: {
message: '郵箱不能為空'
},
emailAddress: {
message: '郵箱地址格式有誤'
}
}
}
}
});
});加上了重疊驗(yàn)證我們來看效果：
由上面的代碼可以看出在validators屬性對(duì)應(yīng)一個(gè)Json對(duì)象，里面可以包含多個(gè)驗(yàn)證的類型：
notEmpty：非空驗(yàn)證；
stringLength：字符串長度驗(yàn)證；
regexp：正則表達(dá)式驗(yàn)證；
emailAddress：郵箱地址驗(yàn)證（都不用我們?nèi)戉]箱的正則了~~）
除此之外，在文檔里面我們看到它總共有46個(gè)驗(yàn)證類型，我們抽幾個(gè)常見的出來看看：
base64：64位編碼驗(yàn)證；
between：驗(yàn)證輸入值必須在某一個(gè)范圍值以內(nèi)，比如大于10小于100；
creditCard：身份證驗(yàn)證；
date：日期驗(yàn)證；
ip：IP地址驗(yàn)證；
numeric：數(shù)值驗(yàn)證；
phone：電話號(hào)碼驗(yàn)證；
uri：url驗(yàn)證；
更多驗(yàn)證類型詳見：http://bv.doc.javake.cn/validators/。當(dāng)然涉及中文的驗(yàn)證可能會(huì)有些小問題，園友們?nèi)绻行枰梢宰孕邢氯ビ么a測試下。
還有一個(gè)比較常用的就是submitHandler屬性，它對(duì)應(yīng)著提交按鈕的事件方法。使用如下：
$(function () {
$('form').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
username: {
message: '用戶名驗(yàn)證失敗',
validators: {
notEmpty: {
message: '用戶名不能為空'
},
stringLength: {
min: 6,
max: 18,
message: '用戶名長度必須在6到18位之間'
},
regexp: {
regexp: /^[a-zA-Z0-9_]+$/,
message: '用戶名只能包含大寫、小寫、數(shù)字和下劃線'
}
}
},
email: {
validators: {
notEmpty: {
message: '郵箱不能為空'
},
emailAddress: {
message: '郵箱地址格式有誤'
}
}
}
},
submitHandler: function (validator, form, submitButton) {
alert("submit");
}
});
});在它的Demo里面介紹了很多驗(yàn)證的實(shí)例。我們簡單看看它的效果，至于實(shí)現(xiàn)代碼，其實(shí)很簡單，有興趣的可以直接看api。
顏色驗(yàn)證
Tab頁表單驗(yàn)證
按鈕驗(yàn)證
以上所述是小編給大家介紹的bootstrap 表單驗(yàn)證使用方法，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)創(chuàng)新互聯(lián)網(wǎng)站的支持！
