uniapp表單驗(yàn)證方法詳解
更新時(shí)間：2022年10月24日 10:03:03 作者：凡夫俗子001
From表單組件具有數(shù)據(jù)收集、提交數(shù)據(jù)的功能,某種程度上說它就是一個(gè)容器,下面這篇文章主要給大家介紹了關(guān)于uniapp表單驗(yàn)證的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
表單驗(yàn)證不觸發(fā)解決辦法
- 第一個(gè)參數(shù)傳入當(dāng)前表單組件所在的 name，同當(dāng)前父組件 uni-forms-item 綁定屬性 name 的值
- 第二個(gè)參數(shù)傳入需要校驗(yàn)的值，內(nèi)置組件可以通過 $event.detail.value 獲取到組件的返回值，自定義組件傳入需要校驗(yàn)的值即可
- 第三個(gè)參數(shù)傳入 uni-forms 組件綁定屬性 ref 的值，通常在多表單的時(shí)候需要傳入，用來區(qū)分表單，如頁面中僅有一個(gè) uni-forms 可忽略
1：直接在input中加入@input="binddata('email',$event.detail.value)"方法
<uni-forms-item label="郵箱" name="email">
<input class="input"
v-model="formData.email"
type="text"
placeholder="請(qǐng)輸入用戶名"
@input="binddata('email',$event.detail.value)" />
</uni-forms-item>2：validateFunction 自定義校驗(yàn)規(guī)則
- rule : 當(dāng)前校驗(yàn)字段在 rules 中所對(duì)應(yīng)的校驗(yàn)規(guī)則
- value : 當(dāng)前校驗(yàn)字段的值
- data : 所有校驗(yàn)字段的字段和值的對(duì)象
- callback : 校驗(yàn)完成時(shí)的回調(diào)，一般無需執(zhí)行callback，返回true(校驗(yàn)通過)或者false(校驗(yàn)失敗)即可 ，如果需要顯示不同的 errMessage，如果校驗(yàn)不通過需要執(zhí)行 callback('提示錯(cuò)誤信息')，如果校驗(yàn)通過，執(zhí)行callback()即可
（1）在onReady中設(shè)置規(guī)則
onReady() {
// 需要在onReady中設(shè)置規(guī)則
this.$refs.form.setRules(this.rules)
},（2）html代碼
<uni-forms ref="form" :modelValue="formData"> <uni-forms-item label="興趣愛好" required name="hobby"> <uni-data-checkbox v-model="formData.hobby" multiple :localdata="hobbys" /> </uni-forms-item> </uni-forms> <button class="button" @click="submit">校驗(yàn)表單</button>
（3）rules代碼
rules: {
hobby: {
rules: [{
required: true,
errorMessage: '請(qǐng)選擇興趣',
},{
validateFunction:function(rule,value,data,callback){
if (value.length < 2) {
callback('請(qǐng)至少勾選兩個(gè)興趣愛好')
}
return true
}
}]
}
}（4）submit函數(shù)
submit(form) {
this.$refs.form.validate().then(res=>{
console.log('成功：', res);
}).catch(err =>{
console.log('失?。?, err);
})
}總結(jié)
到此這篇關(guān)于uniapp表單驗(yàn)證的文章就介紹到這了,更多相關(guān)uniapp表單驗(yàn)證內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關(guān)文章
ie與firefox下的event使用說明與詳細(xì)區(qū)別
event是ie自帶的一個(gè)對(duì)象，而ff中不存在該對(duì)象，只能通過傳遞參數(shù)（并且惟一）的方式來實(shí)現(xiàn)event.2009-10-10
微信小程序 云開發(fā)模糊查詢實(shí)現(xiàn)解析
這篇文章主要介紹了微信小程序 云開發(fā)模糊查詢實(shí)現(xiàn)詳解,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09
本文主要介紹了js字符串分割處理的幾種方法，主要介紹了6種方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
詳細(xì)談?wù)凟S6中的symbol數(shù)據(jù)類型
這篇文章主要給大家介紹了關(guān)于ES6中symbol數(shù)據(jù)類型的相關(guān)資料,Symbol函數(shù)的特性是每一個(gè)Symbol函數(shù)的返回值都是唯一的,可以通過給symbol函數(shù)傳遞不同的參數(shù)產(chǎn)生具有不同標(biāo)記的值,需要的朋友可以參考下2021-08-08
Javascript數(shù)組方法reduce的妙用之處分享
這篇文章主要給大家介紹了關(guān)于Javascript數(shù)組方法reduce的妙用之處，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Javascript具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
這篇文章主要介紹了JS中==、===你分清楚了嗎,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
js設(shè)置文本框中焦點(diǎn)位置在最后的示例代碼(簡單實(shí)用)
本篇文章主要是對(duì)js設(shè)置文本框中焦點(diǎn)位置在最后的示例代碼進(jìn)行了介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2014-03-03
JavaScript中push(),join() 函數(shù) 實(shí)例詳解
本文通過實(shí)例給大家介紹了JavaScript中push(),join() 的知識(shí)，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下2016-09-09
JavaScript實(shí)現(xiàn)電燈開關(guān)小案例
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)電燈開關(guān)小案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-03-03
經(jīng)常使用document.getElementById，但對(duì)于更詳細(xì)的細(xì)節(jié)可以參考下。2011-09-09