快捷導(dǎo)航

BootStrap Validator對(duì)于隱藏域驗(yàn)證和程序賦值即時(shí)驗(yàn)證的問(wèn)題淺析

更新時(shí)間：2016年12月01日 10:29:37 作者：嘿煤貴

這篇文章主要介紹了BootStrap Validator對(duì)于隱藏域驗(yàn)證和程序賦值即時(shí)驗(yàn)證的問(wèn)題的解決方法,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下

問(wèn)題1：

如下代碼：

<input type="hidden" name="productId"/>

$("#addForm").bootstrapValidator({
fields: {
productId: {
validators: {
notEmpty: {
message: '請(qǐng)選擇一個(gè)商品'
}
}
}
}
});

這樣的配置并沒有在提交的時(shí)候?qū)Ρ韱卧豴roductId進(jìn)行驗(yàn)證，那是因?yàn)閎ootstrapValidator默認(rèn)配置對(duì)于“隱藏域（:hidden）、禁用域（:disabled）、那啥域（:not(visible)）”是不進(jìn)行驗(yàn)證的。

解決方法：

$("#addForm").bootstrapValidator({
//excluded:[":hidden",":disabled",":not(visible)"] ,//bootstrapValidator的默認(rèn)配置
excluded:[":disabled"],//關(guān)鍵配置，表示只對(duì)于禁用域不進(jìn)行驗(yàn)證，其他的表單元素都要驗(yàn)證
fields: {
productId: {
validators: {
notEmpty: {
message: '請(qǐng)選擇一個(gè)商品'
}
}
}
}
});

問(wèn)題2：

我們往往會(huì)有這樣的需求，如下圖：

在選擇商品之后會(huì)在productName里面展示商品名稱給用戶看，而在productId這個(gè)隱藏域里面放一個(gè)商品的ID。

一般情況下這樣的操作是由程序來(lái)完成的，

$("input[name='productId']").val(data.productId);

bootstrapValidator這個(gè)插件不能捕獲這樣的“程序賦值事件”，所以這里不能達(dá)到驗(yàn)證的效果，所以我們需要做一個(gè)小小的變通：

$("#addForm").bootstrapValidator({
//excluded:[":hidden",":disabled",":not(visible)"] ,//bootstrapValidator的默認(rèn)配置
excluded:[":disabled"],//關(guān)鍵配置，表示只對(duì)于禁用域不進(jìn)行驗(yàn)證，其他的表單元素都要驗(yàn)證
fields: {
productId: {
trigger:"change", //問(wèn)題2.關(guān)鍵配置
validators: {
notEmpty: {
message: '請(qǐng)選擇一個(gè)商品'
}
}
}
}
});
//賦值之后觸發(fā)一次“change”事件
$("input[name='productId']").val(data.productId).change();

這樣以后bootrapValidator會(huì)因?yàn)橛|發(fā)了“change”事件，而捕獲，達(dá)到驗(yàn)證的效果

以上所述是小編給大家介紹的BootStrap Validator對(duì)于隱藏域驗(yàn)證和程序賦值即時(shí)驗(yàn)證的問(wèn)題淺析，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

javascript 控制input只允許輸入的各種指定內(nèi)容
這篇文章主要介紹了通過(guò)javascript控制input只允許輸入的各種指定內(nèi)容,需要的朋友可以參考下
2014-06-06
用javascript調(diào)出windows色版的代碼
用javascript調(diào)出windows色版的代碼...
2007-07-07
JS 9個(gè)Promise面試題
這篇文章主要介紹了JS 9個(gè)Promise面試題，對(duì)異步Promise感興趣的同學(xué)，可以參考下
2021-05-05
前端實(shí)現(xiàn)視頻文件動(dòng)畫幀圖片提取完整教程
相信很多小伙伴在一些短視頻平臺(tái)上傳視頻的時(shí)候,系統(tǒng)會(huì)自動(dòng)幫我們生成一些視頻中的畫面幀的圖片,讓我們作為視頻封面的功能,那么這些短視頻平臺(tái)是如何從視頻中抽取關(guān)鍵幀來(lái)作為封面,今天博主就帶著大家一起來(lái)探討這個(gè)問(wèn)題,感興趣的小伙伴跟著小編一起來(lái)看看吧
2025-04-04
JS動(dòng)態(tài)計(jì)算移動(dòng)端rem的解決方案
移動(dòng)設(shè)備分辨率五花八門雖然我們可以通過(guò)CSS3的media query來(lái)實(shí)現(xiàn)適配，但是這種做法并不能適配所有設(shè)備，這篇文章主要介紹了js動(dòng)態(tài)計(jì)算移動(dòng)端rem的解決方案，非常不錯(cuò)，感興趣的朋友一起看看吧
2016-10-10
JavaScript setTimeout和setInterval的使用方法說(shuō)明
兩個(gè)函數(shù)都是可以用來(lái)實(shí)現(xiàn)一段時(shí)間后執(zhí)行一段javascript代碼的效果。兩個(gè)函數(shù)都有兩個(gè)參數(shù)，前面的都是執(zhí)行表達(dá)式，后面的是隔的秒數(shù)。
2010-03-03
JavaScript setinterval延遲一秒解決方案
這篇文章主要介紹了JavaScript setinterval延遲一秒解決方案,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下
2021-09-09
JavaScript對(duì)象的四種創(chuàng)建方法
這篇文章主要介紹了JavaScript對(duì)象的四種創(chuàng)建方法，首先我們通過(guò)確定一個(gè)對(duì)象的屬性和方法展開主題相關(guān)內(nèi)容，需要的小伙伴可以參考一下
2022-08-08
JavaScript對(duì)象詳解之對(duì)象屬性的添加
這篇文章主要給大家介紹了關(guān)于JavaScript對(duì)象詳解之js對(duì)象屬性的添加的相關(guān)資料,在JavaScript中對(duì)象是通過(guò)鍵值對(duì)來(lái)存儲(chǔ)數(shù)據(jù)的一種數(shù)據(jù)類型,可以通過(guò)直接給對(duì)象添加屬性的方式來(lái)增加對(duì)象的屬性,需要的朋友可以參考下
2023-07-07
基于js實(shí)現(xiàn)checkbox批量選中操作
這篇文章主要為大家詳細(xì)介紹了基于js實(shí)現(xiàn)checkbox批量選中操作,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-11-11