uniapp表單驗證方法詳解
更新時間:2022年10月24日 10:03:03 作者:凡夫俗子001
From表單組件具有數(shù)據(jù)收集、提交數(shù)據(jù)的功能,某種程度上說它就是一個容器,下面這篇文章主要給大家介紹了關(guān)于uniapp表單驗證的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
表單驗證不觸發(fā)解決辦法
- 第一個參數(shù)傳入當前表單組件所在的 name,同當前父組件 uni-forms-item 綁定屬性 name 的值
- 第二個參數(shù)傳入需要校驗的值,內(nèi)置組件可以通過 $event.detail.value 獲取到組件的返回值,自定義組件傳入需要校驗的值即可
- 第三個參數(shù)傳入 uni-forms 組件綁定屬性 ref 的值,通常在多表單的時候需要傳入,用來區(qū)分表單,如頁面中僅有一個 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="請輸入用戶名"
@input="binddata('email',$event.detail.value)" />
</uni-forms-item>2:validateFunction 自定義校驗規(guī)則
- rule : 當前校驗字段在 rules 中所對應的校驗規(guī)則
- value : 當前校驗字段的值
- data : 所有校驗字段的字段和值的對象
- callback : 校驗完成時的回調(diào),一般無需執(zhí)行callback,返回true(校驗通過)或者false(校驗失敗)即可 ,如果需要顯示不同的 errMessage,如果校驗不通過需要執(zhí)行 callback('提示錯誤信息'),如果校驗通過,執(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">校驗表單</button>
(3)rules代碼
rules: {
hobby: {
rules: [{
required: true,
errorMessage: '請選擇興趣',
},{
validateFunction:function(rule,value,data,callback){
if (value.length < 2) {
callback('請至少勾選兩個興趣愛好')
}
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表單驗證的文章就介紹到這了,更多相關(guān)uniapp表單驗證內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
您可能感興趣的文章:
相關(guān)文章
javascript創(chuàng)建頁面蒙板的一些知識技巧總結(jié)
javascript創(chuàng)建頁面蒙板的一些知識技巧總結(jié)...2007-08-08
JavaScript前端巧妙實現(xiàn)數(shù)據(jù)實時更新詳解
作為開發(fā)者,我們常面對復雜的開發(fā)環(huán)境,要應對即時通訊與數(shù)據(jù)實時更新的問題,那么該如何精準高效實現(xiàn)這些功能呢,下面小編就來和大家簡單講講2025-03-03
escape函數(shù)解決js中ajax傳遞中文出現(xiàn)亂碼問題
這篇文章主要介紹了escape函數(shù)解決js中ajax傳遞中文出現(xiàn)亂碼問題,是非常實用的技巧,需要的朋友可以參考下2014-10-10
掃微信小程序碼實現(xiàn)網(wǎng)站登陸實現(xiàn)解析
這篇文章主要介紹了掃微信小程序碼實現(xiàn)網(wǎng)站登陸實現(xiàn)解析,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-08-08
JavaScript 拖拽與觀察者模式的實現(xiàn)及應用小結(jié)
本文通過代碼片段詳細介紹了JavaScript中的拖拽功能和觀察者模式(發(fā)布-訂閱模式)的實現(xiàn)及其應用場景,拖拽功能允許用戶通過鼠標移動元素,而觀察者模式則定義了一種一對多的依賴關(guān)系,使得對象能夠自動更新,感興趣的朋友跟隨小編一起看看吧2025-01-01

