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 中所對應(yīng)的校驗規(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)文章
ie與firefox下的event使用說明與詳細區(qū)別
event是ie自帶的一個對象，而ff中不存在該對象，只能通過傳遞參數(shù)（并且惟一）的方式來實現(xiàn)event.2009-10-10
這篇文章主要介紹了微信小程序 云開發(fā)模糊查詢實現(xiàn)詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-09-09
本文主要介紹了js字符串分割處理的幾種方法，主要介紹了6種方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-06-06
詳細談?wù)凟S6中的symbol數(shù)據(jù)類型
這篇文章主要給大家介紹了關(guān)于ES6中symbol數(shù)據(jù)類型的相關(guān)資料,Symbol函數(shù)的特性是每一個Symbol函數(shù)的返回值都是唯一的,可以通過給symbol函數(shù)傳遞不同的參數(shù)產(chǎn)生具有不同標記的值,需要的朋友可以參考下2021-08-08
Javascript數(shù)組方法reduce的妙用之處分享
這篇文章主要給大家介紹了關(guān)于Javascript數(shù)組方法reduce的妙用之處，文中通過示例代碼介紹的非常詳細，對大家學習或者使用Javascript具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-06-06
這篇文章主要介紹了JS中==、===你分清楚了嗎,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-03-03
js設(shè)置文本框中焦點位置在最后的示例代碼(簡單實用)
本篇文章主要是對js設(shè)置文本框中焦點位置在最后的示例代碼進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-03-03
JavaScript中push(),join() 函數(shù) 實例詳解
本文通過實例給大家介紹了JavaScript中push(),join() 的知識，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2016-09-09
JavaScript實現(xiàn)電燈開關(guān)小案例
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)電燈開關(guān)小案例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03
經(jīng)常使用document.getElementById，但對于更詳細的細節(jié)可以參考下。2011-09-09