jQuery開源組件BootstrapValidator使用詳解
本文實例為大家分享了BootstrapValidator使用方法,供大家參考,具體內(nèi)容如下
github:https://github.com/nghuuphuoc/bootstrapvalidator
參考博客:JS組件系列——Form表單驗證神器: BootstrapValidator
表單HTML,如下:
<form role="form" id="roleForm"> <div class="box-body"> <div class="form-group"> <input type="text" class="form-control" id="inputRoleName" name="roleName" placeholder="角色名稱" /> </div> <div class="form-group"> <input type="text" class="form-control" id="inputRoleDescribe" name="roleDescribe" placeholder="角色描述" /> </div> <div class="form-group"> <select class="form-control select2" style="width: 100%;" id="selectRoleType"> </select> </div> <div class="form-group"> <select class="form-control select2" style="width: 100%;" id="selectUseFlag"> <option selected="selected" value='Y'>可用</option> <option value='N'>不可用</option> </select> </div> <div class="form-group"> <input type="text" class="form-control" id="inputDisplaySn" name="displaySn" placeholder="顯示序號" /> </div> </div> </form>
js代碼如下:
function initForm(){ $('#roleForm').bootstrapValidator({ fields : { roleName : { validators : { notEmpty : { message : '角色名稱不能為空' }, stringLength : { min : 1, max : 16, message : '角色名稱長度必須在1到16位之間' }, regexp : { regexp : /^[^&@#/"']*$/, message : '角色名稱不能包含&@#/\"\'等字符' } } }, roleDescribe : { validators : { notEmpty : { message : '角色描述不能為空' }, stringLength : { min : 1, max : 64, message : '角色描述長度必須在1到64位之間' }, regexp : { regexp : /^[^&@#/"']*$/, message : '角色名稱不能包含&@#/\"\'等字符' } } } } }); }
保存前驗證代碼如下:
function save_click() { $('#roleForm').bootstrapValidator('validate'); var valid = $('#roleForm').data('bootstrapValidator').isValid(); if(!valid){return;}
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
- JS組件Form表單驗證神器BootstrapValidator
- 基于jQuery 實現(xiàn)bootstrapValidator下的全局驗證
- 實用又漂亮的BootstrapValidator表單驗證插件
- BootstrapValidator超詳細教程(推薦)
- Bootstrap中的表單驗證插件bootstrapValidator使用方法整理(推薦)
- BootStrap Validator使用注意事項(必看篇)
- jquery插件bootstrapValidator數(shù)據(jù)驗證詳解
- Bootstrapvalidator校驗、校驗清除重置的實現(xiàn)代碼(推薦)
- jquery插件bootstrapValidator表單驗證詳解
- 使用bootstrap validator的remote驗證代碼經(jīng)驗分享(推薦)
相關文章
javascript 全角轉(zhuǎn)換實現(xiàn)代碼
當客戶端用戶切換輸入法至全角時可能您的表單提交會有漏洞哦!不過事實上js有這功能 可以將其轉(zhuǎn)換為非全角字符!2009-07-07jquery EasyUI的formatter格式化函數(shù)代碼
以下實例格式化數(shù)據(jù)表格中的一列。如果金額小于20時使用自定義的格式器將文本變成紅色。2011-01-01jQuery中的read和JavaScript中的onload函數(shù)的區(qū)別
這篇文章主要介紹了jQuery中的read和JavaScript中的onload函數(shù)的區(qū)別,這兩個函數(shù)在web編程中是最常用的,一定要搞清楚它們的區(qū)別,需要的朋友可以參考下2014-08-08jQuery+css+html實現(xiàn)頁面遮罩彈出框
面遮罩彈出框已經(jīng)不是一個陌生的話題了,實現(xiàn)的方法大同小異多種多樣,今天用jQuery實現(xiàn)頁面遮罩彈出框,主要用的技術有JQuery,css和html,感興趣的朋友可以參考下哈2013-03-03用jquery實現(xiàn)動畫跳到頂部和底部(這個比較簡單)
用jquery實現(xiàn)動畫的跳到頂部和底部,當點擊頂部按鈕的時候,執(zhí)行方法,scrollTop屬性獲取選中標簽距滾動條的距離2014-09-09jquery 元素控制(追加元素/追加內(nèi)容)介紹及應用
一、在元素內(nèi)部/外部追加元素二、在元素的不同位置追加內(nèi)容三、在元素的開始位置追加內(nèi)容四、在不同元素的開始位置追加內(nèi)容等等,感興趣的朋友可以參考下哈2013-04-04