欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

BootStrap Validator對于隱藏域驗證和程序賦值即時驗證的問題淺析

 更新時間:2016年12月01日 10:29:37   作者:嘿煤貴  
這篇文章主要介紹了BootStrap Validator對于隱藏域驗證和程序賦值即時驗證的問題的解決方法,非常不錯,具有參考借鑒價值,需要的朋友可以參考下

問題1:

如下代碼:

<input type="hidden" name="productId"/>
$("#addForm").bootstrapValidator({
fields: {
productId: {
validators: {
notEmpty: {
message: '請選擇一個商品'
}
}
}
}
});

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

解決方法:

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

問題2:

我們往往會有這樣的需求,如下圖:

在選擇商品之后會在productName里面展示商品名稱給用戶看,而在productId這個隱藏域里面放一個商品的ID。

一般情況下這樣的操作是由程序來完成的,

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

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

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

這樣以后bootrapValidator會因為觸發(fā)了“change”事件,而捕獲,達(dá)到驗證的效果

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

相關(guān)文章

  • Jquery顏色選擇器ColorPicker實現(xiàn)代碼

    Jquery顏色選擇器ColorPicker實現(xiàn)代碼

    這里我要分享一個自己修改的顏色選擇器,有需要的朋友參考下
    2012-11-11
  • js實現(xiàn)使用鼠標(biāo)拖拽切換圖片的方法

    js實現(xiàn)使用鼠標(biāo)拖拽切換圖片的方法

    這篇文章主要介紹了js實現(xiàn)使用鼠標(biāo)拖拽切換圖片的方法,涉及javascript操作圖片實現(xiàn)輪播效果的相關(guān)技巧,非常具有實用價值,需要的朋友可以參考下
    2015-05-05
  • 學(xué)習(xí)drag and drop js實現(xiàn)代碼經(jīng)典之作

    學(xué)習(xí)drag and drop js實現(xiàn)代碼經(jīng)典之作

    今天讀John Resig的Pro Javascript Techniques時候看到他書上給的一個關(guān)于drag and drop的例子, 合上書本自己寫一個簡化版本的。大約20分鐘完成, 沒有考慮兼容firefox。整個代碼封裝成一個對象 也是借鑒書中的風(fēng)格。我覺得很好。
    2009-04-04
  • 原生js實現(xiàn)彈幕效果

    原生js實現(xiàn)彈幕效果

    這篇文章主要為大家詳細(xì)介紹了原生js實現(xiàn)彈幕效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-11-11
  • 微信小程序?qū)崿F(xiàn)吸頂效果的方法實例

    微信小程序?qū)崿F(xiàn)吸頂效果的方法實例

    在微信小程序的開發(fā)中,經(jīng)常會有列表分類標(biāo)簽隨著界面滾動吸頂?shù)男Ч?下面這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崿F(xiàn)吸頂效果的相關(guān)資料,需要的朋友可以參考下
    2021-08-08
  • JavaScript中為元素加上name屬性的方法

    JavaScript中為元素加上name屬性的方法

    干前端這行當(dāng)已經(jīng)超過一個月了, 每天都會遇到新奇古怪, 甚至離奇的問題. 雖然絕大部分都是一些小問題, 但我覺得還是有必要記錄下來
    2011-05-05
  • ie支持function.bind()方法實現(xiàn)代碼

    ie支持function.bind()方法實現(xiàn)代碼

    在 google 一番技術(shù)資料后,發(fā)現(xiàn) firefox 原生支持一個 bind 方法,該方法很好的滿足了我們的初衷,調(diào)用方法與 call 和 apply 一樣,只是定義完成后,在后期調(diào)用時該方法才會執(zhí)行,需要的朋友可以了解下
    2012-12-12
  • 微信小程序web-view無法打開該頁面不支持打開的解決方法

    微信小程序web-view無法打開該頁面不支持打開的解決方法

    小程序現(xiàn)在日漸成熟,功能也越來越強(qiáng)大,我們今天來一起看看小程序跳轉(zhuǎn)的問題,下面這篇文章主要給大家介紹了關(guān)于微信小程序web-view無法打開該頁面不支持打開的解決方法,需要的朋友可以參考下
    2023-01-01
  • JS實現(xiàn)可編輯的后臺管理菜單功能【附demo源碼下載】

    JS實現(xiàn)可編輯的后臺管理菜單功能【附demo源碼下載】

    這篇文章主要介紹了JS實現(xiàn)可編輯的后臺管理菜單功能,涉及javascript針對頁面元素的遍歷及動態(tài)修改相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下
    2016-09-09
  • js 獲取html5的data屬性實現(xiàn)方法

    js 獲取html5的data屬性實現(xiàn)方法

    下面小編就為大家?guī)硪黄猨s 獲取html5的data屬性實現(xiàn)方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-07-07

最新評論