uniapp表單驗(yàn)證方法詳解
更新時(shí)間：2022年10月24日 10:03:03 作者：凡夫俗子001
From表單組件具有數(shù)據(jù)收集、提交數(shù)據(jù)的功能,某種程度上說(shuō)它就是一個(gè)容器,下面這篇文章主要給大家介紹了關(guān)于uniapp表單驗(yàn)證的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
表單驗(yàn)證不觸發(fā)解決辦法
- 第一個(gè)參數(shù)傳入當(dāng)前表單組件所在的 name，同當(dāng)前父組件 uni-forms-item 綁定屬性 name 的值
- 第二個(gè)參數(shù)傳入需要校驗(yàn)的值，內(nèi)置組件可以通過(guò) $event.detail.value 獲取到組件的返回值，自定義組件傳入需要校驗(yàn)的值即可
- 第三個(gè)參數(shù)傳入 uni-forms 組件綁定屬性 ref 的值，通常在多表單的時(shí)候需要傳入，用來(lái)區(qū)分表單，如頁(yè)面中僅有一個(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)輸入用戶(hù)名"
@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)，一般無(wú)需執(zhí)行callback，返回true(校驗(yàn)通過(guò))或者false(校驗(yàn)失敗)即可 ，如果需要顯示不同的 errMessage，如果校驗(yàn)不通過(guò)需要執(zhí)行 callback('提示錯(cuò)誤信息')，如果校驗(yàn)通過(guò)，執(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="興趣愛(ài)好" 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è)興趣愛(ài)好')
}
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)文章
這篇文章主要為大家詳細(xì)介紹了JavaScript前端中的常見(jiàn)異常以及如何捕獲這些異常,文中的示例代碼講解詳細(xì),需要的小伙伴可以參考一下2024-03-03
javascript 保存文件到本地實(shí)現(xiàn)方法
本文將提供兩種方式保存圖片，大家可以根據(jù)喜歡自由選擇2012-11-11
js實(shí)現(xiàn)PC端和移動(dòng)端刮卡效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)PC端和移動(dòng)端刮卡效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
javascript創(chuàng)建頁(yè)面蒙板的一些知識(shí)技巧總結(jié)
javascript創(chuàng)建頁(yè)面蒙板的一些知識(shí)技巧總結(jié)...2007-08-08
這篇文章主要介紹了javascript中setInterval的用法的相關(guān)資料,需要的朋友可以參考下2015-07-07
JavaScript前端巧妙實(shí)現(xiàn)數(shù)據(jù)實(shí)時(shí)更新詳解
作為開(kāi)發(fā)者,我們常面對(duì)復(fù)雜的開(kāi)發(fā)環(huán)境,要應(yīng)對(duì)即時(shí)通訊與數(shù)據(jù)實(shí)時(shí)更新的問(wèn)題,那么該如何精準(zhǔn)高效實(shí)現(xiàn)這些功能呢,下面小編就來(lái)和大家簡(jiǎn)單講講2025-03-03
這篇文章主要介紹了微信小程序使用image組件顯示圖片的方法,結(jié)合實(shí)例形式簡(jiǎn)單分析了微信小程序附image組件的相關(guān)使用技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下2017-12-12
escape函數(shù)解決js中ajax傳遞中文出現(xiàn)亂碼問(wèn)題
這篇文章主要介紹了escape函數(shù)解決js中ajax傳遞中文出現(xiàn)亂碼問(wèn)題,是非常實(shí)用的技巧,需要的朋友可以參考下2014-10-10
掃微信小程序碼實(shí)現(xiàn)網(wǎng)站登陸實(shí)現(xiàn)解析
這篇文章主要介紹了掃微信小程序碼實(shí)現(xiàn)網(wǎng)站登陸實(shí)現(xiàn)解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-08-08
JavaScript 拖拽與觀(guān)察者模式的實(shí)現(xiàn)及應(yīng)用小結(jié)
本文通過(guò)代碼片段詳細(xì)介紹了JavaScript中的拖拽功能和觀(guān)察者模式（發(fā)布-訂閱模式）的實(shí)現(xiàn)及其應(yīng)用場(chǎng)景,拖拽功能允許用戶(hù)通過(guò)鼠標(biāo)移動(dòng)元素,而觀(guān)察者模式則定義了一種一對(duì)多的依賴(lài)關(guān)系,使得對(duì)象能夠自動(dòng)更新,感興趣的朋友跟隨小編一起看看吧2025-01-01