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