基于BootstrapValidator的Form表單驗(yàn)證(24)
Form表單進(jìn)行數(shù)據(jù)驗(yàn)證是十分必要的,我們可以自己寫(xiě)JS腳本或者使用JQuery Validate 插件來(lái)實(shí)現(xiàn)。對(duì)于Bootstrap而言,利用BootstrapValidator來(lái)做Form表單驗(yàn)證是個(gè)相當(dāng)不錯(cuò)的選擇,兩者完全兼容,我們也不用去關(guān)注CSS樣式等美工效果。
0x01 引入BootstrapValidator
官網(wǎng):BootstrapValidator,作為一個(gè)純粹的使用者,我們可以在上面的鏈接處下載相關(guān)文件并引入,也可以利用CDN方式引入:
<link rel="stylesheet">
<script src="http://cdn.bootcss.com/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js"></script>
0x02 用戶(hù)注冊(cè)實(shí)例
下面使用一個(gè)用戶(hù)注冊(cè)的實(shí)例,來(lái)總結(jié)BootstrapValidator的基本使用方法(其中的JS和CSS文件的引入,請(qǐng)根據(jù)自己的實(shí)際位置進(jìn)行調(diào)整):
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>用戶(hù)注冊(cè)</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="../../../css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet"> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <script src="../../../js/bootstrap.min.js"></script> <script src="http://cdn.bootcss.com/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js"></script> </head> <body> <div class="container col-lg-3 col-lg-offset-3"> <div class="page-header"> <h3>用戶(hù)注冊(cè)</h3> </div> <div> <form id="registerForm" method="POST" class="form-horizontal" action="用戶(hù)注冊(cè).html"> <div class="form-group"> <!--注冊(cè)的用戶(hù)名--> <label class="control-label" for="username">*請(qǐng)輸入注冊(cè)用戶(hù)名:</label> <input type="text" class="form-control" placeholder="請(qǐng)輸入注冊(cè)用戶(hù)名" name="username" id="username"> </div> <div class="form-group"> <!--注冊(cè)密碼--> <label class="control-label" for="password">*請(qǐng)輸入注冊(cè)密碼:</label> <input type="password" class="form-control" placeholder="請(qǐng)輸入注冊(cè)密碼" name="password" id="password"> </div> <div class="form-group"> <!--確認(rèn)密碼--> <label class="control-label" for="repassword">*請(qǐng)輸入確認(rèn)密碼:</label> <input type="password" class="form-control" placeholder="請(qǐng)輸入確認(rèn)密碼" name="repassword" id="repassword"> </div> <div class="form-group"> <label class="control-label" for="phone">*請(qǐng)輸入手機(jī)號(hào)碼:</label> <input type="text" class="form-control" placeholder="請(qǐng)輸入手機(jī)號(hào)碼" name="phone" id="phone"> </div> <div class="form-group"> <label class="control-label" for="email">*請(qǐng)輸入電子郵箱:</label> <input type="text" class="form-control" placeholder="請(qǐng)輸入電子郵箱" name="email" id="email"> </div> <div class="form-group"> <label class="control-label" for="inviteCode">*請(qǐng)輸入邀請(qǐng)碼:</label> <input type="text" class="form-control" placeholder="請(qǐng)輸入邀請(qǐng)碼" name="inviteCode" id="inviteCode"> </div> <div class="form-group"> <button type="submit" class="btn btn-primary form-control">提交注冊(cè)</button> </div> </form> </div> </div> <script> $(function () { <!--數(shù)據(jù)驗(yàn)證--> $("#registerForm").bootstrapValidator({ message:'This value is not valid', // 定義未通過(guò)驗(yàn)證的狀態(tài)圖標(biāo) feedbackIcons: {/*輸入框不同狀態(tài),顯示圖片的樣式*/ valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, // 字段驗(yàn)證 fields:{ // 用戶(hù)名 username:{ message:'用戶(hù)名非法', validators:{ // 非空 notEmpty:{ message:'用戶(hù)名不能為空' }, // 限制字符串長(zhǎng)度 stringLength:{ min:3, max:20, message:'用戶(hù)名長(zhǎng)度必須位于3到20之間' }, // 基于正則表達(dá)是的驗(yàn)證 regexp:{ regexp:/^[a-zA-Z0-9_\.]+$/, message:'用戶(hù)名由數(shù)字字母下劃線和.組成' } } }, // 密碼 password:{ message:'密碼非法', validators:{ notEmpty:{ message:'密碼不能為空' }, // 限制字符串長(zhǎng)度 stringLength:{ min:3, max:20, message:'密碼長(zhǎng)度必須位于3到20之間' }, // 相同性檢測(cè) identical:{ // 需要驗(yàn)證的field field:'password', message:'兩次密碼輸入不一致' }, // 基于正則表達(dá)是的驗(yàn)證 regexp:{ regexp:/^[a-zA-Z0-9_\.]+$/, message:'密碼由數(shù)字字母下劃線和.組成' } } }, // 確認(rèn)密碼 repassword:{ message:'密碼非法', validators:{ notEmpty:{ message:'密碼不能為空' }, // 限制字符串長(zhǎng)度 stringLength:{ min:3, max:20, message:'密碼長(zhǎng)度必須位于3到20之間' }, // 相同性檢測(cè) identical:{ // 需要驗(yàn)證的field field:'password', message:'兩次密碼輸入不一致' }, // 基于正則表達(dá)是的驗(yàn)證 regexp:{ regexp:/^[a-zA-Z0-9_\.]+$/, message:'密碼由數(shù)字字母下劃線和.組成' } } }, // 電子郵箱 email:{ validators:{ notEmpty:{ message:'郵箱地址不能為空' }, emailAddress:{ message:'請(qǐng)輸入正確的郵箱地址' } } }, // 手機(jī)號(hào)碼 phone:{ validators:{ notEmpty:{ message:'手機(jī)號(hào)碼不能為空' }, stringlength:{ min:11, max:11, message:'請(qǐng)輸入11位手機(jī)號(hào)碼' }, regexp:{ regexp:/^1[3|5|8]{1}[0-9]{9}$/, message:'請(qǐng)輸入正確的手機(jī)號(hào)碼' } } }, // 邀請(qǐng)碼 inviteCode:{ validators:{ notEmpty:{ message:'邀請(qǐng)碼不能為空' }, stringlength:{ min:9, max:9, message:'請(qǐng)輸入9位邀請(qǐng)碼' }, regexp:{ regexp:/^[\w]{8}$/, message:'邀請(qǐng)碼由數(shù)字和字母組成' } } } } }) }) </script> </body> </html>
驗(yàn)證效果如下:
0x03 后記
在實(shí)際應(yīng)用中,可能還會(huì)遇到類(lèi)似Ajax提交驗(yàn)證的問(wèn)題,處理過(guò)程是類(lèi)似的,以后再結(jié)合實(shí)際的應(yīng)用來(lái)講這個(gè)問(wèn)題。
類(lèi)似BootstrapValidator這種基于JS來(lái)做驗(yàn)證的過(guò)程只是客戶(hù)端驗(yàn)證,只是為了提高用戶(hù)體驗(yàn),并不能保證提交數(shù)據(jù)的安全性,后端開(kāi)發(fā)者還要做相應(yīng)的后臺(tái)驗(yàn)證。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Bootstrap中的表單驗(yàn)證插件bootstrapValidator使用方法整理(推薦)
- JS組件Form表單驗(yàn)證神器BootstrapValidator
- 實(shí)用又漂亮的BootstrapValidator表單驗(yàn)證插件
- jquery插件bootstrapValidator數(shù)據(jù)驗(yàn)證詳解
- bootstrapValidator bootstrap-select驗(yàn)證不可用的解決辦法
- 基于jQuery 實(shí)現(xiàn)bootstrapValidator下的全局驗(yàn)證
- jquery插件bootstrapValidator表單驗(yàn)證詳解
- bootstrapValidator自定驗(yàn)證方法寫(xiě)法
- 使用BootStrapValidator完成前端輸入驗(yàn)證
- BootstrapValidator驗(yàn)證用戶(hù)名已存在(ajax)
相關(guān)文章
JavaScript逆向調(diào)試技巧總結(jié)分享
當(dāng)我們抓取網(wǎng)頁(yè)端數(shù)據(jù)時(shí),經(jīng)常被加密參數(shù)、加密數(shù)據(jù)所困擾,如何快速定位這些加解密函數(shù),尤為重要,下面這篇文章主要給大家介紹了關(guān)于JavaScript逆向調(diào)試技巧的相關(guān)資料,需要的朋友可以參考下2022-06-06JS HTML5 音樂(lè)天氣播放器(Ajax獲取天氣信息)
寫(xiě)個(gè)播放器應(yīng)付復(fù)習(xí),因?yàn)锳jax涉及到跨域獲取天氣信息,有兩個(gè)版本,一個(gè)是直接跨域,IE10支持,其他的瀏覽器要改配置2013-05-05獲取本機(jī)IP地址的實(shí)例(JavaScript / Node.js)
下面小編就為大家分享一篇使用JavaScript和Node.js獲取本機(jī)IP地址的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助2017-11-11JS實(shí)現(xiàn)從頂部下拉顯示的帶動(dòng)畫(huà)QQ客服特效代碼
這篇文章主要介紹了JS實(shí)現(xiàn)從頂部下拉顯示的帶動(dòng)畫(huà)QQ客服特效代碼,可實(shí)現(xiàn)彈性緩沖效果的彈出QQ客服窗口的功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10html的DOM中document對(duì)象forms集合用法實(shí)例
這篇文章主要介紹了html的DOM中document對(duì)象forms集合用法,實(shí)例分析了forms集合的功能與使用技巧,需要的朋友可以參考下2015-01-01本地Bootstrap文件字體圖標(biāo)引入?yún)s無(wú)法顯示問(wèn)題的解決方法
這篇文章主要為大家詳細(xì)介紹了本地Bootstrap文件字體圖標(biāo)引入?yún)s無(wú)法顯示問(wèn)題的解決方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12js使用Replace結(jié)合正則替換重復(fù)出現(xiàn)的字符串功能示例
這篇文章主要介紹了js使用Replace結(jié)合正則替換重復(fù)出現(xiàn)的字符串功能,可實(shí)現(xiàn)關(guān)鍵詞描紅的功能,涉及JS重復(fù)匹配的相關(guān)操作技巧,需要的朋友可以參考下2016-12-12