快捷導(dǎo)航

uni-app中vue3表單校驗失敗的問題及解決方法

更新時間：2023年12月07日 12:00:13 作者：linab112

最近遇到這樣的問題在app中使用uni-forms表單,并添加校驗規(guī)則,問題是即使輸入內(nèi)容,表單校驗依然失敗,本文給大家分享uni-app中vue3表單校驗失敗的問題及解決方法,感興趣的朋友一起看看吧

1.問題

在app中使用uni-forms表單，并添加校驗規(guī)則，問題是即使輸入內(nèi)容，表單校驗依然失敗。

代碼：

<template>
	<view>
		<uni-forms ref="seedForm" :model="formData" :rules="rules" label-position="top">
			<uni-forms-item label="姓名" name="name">
				<input type="text" v-model="formData.name" placeholder="請輸入姓名" />
			</uni-forms-item>
			<uni-forms-item label="郵箱" name="email">
				<input class="input" v-model="formData.email" type="text" placeholder="請輸入郵箱" />
			</uni-forms-item>
		</uni-forms>
		<button @click="submit">Submit</button>
	</view>
</template>
<script lang="ts" setup>
	import { onReady } from "@dcloudio/uni-app";
	import { ref } from "vue";
	const seedForm = ref();
	const resetForm = () => {
		return {
			name: '',
			email: ''
		}
	};
	let formData = resetForm();
	const rules = {
		// 對name字段進(jìn)行必填驗證
		name: {
			rules: [{
				required: true,
				errorMessage: '請輸入姓名'
			},
			{
				minLength: 3,
				maxLength: 5,
				errorMessage: '姓名長度在 {minLength} 到 {maxLength} 個字符'
			}],
		},
		// 對email字段進(jìn)行必填驗證
		email: {
			rules: [{
				required: true,
				errorMessage: '請輸入郵箱'
			}],
		}
	};
	onReady(() => {
		seedForm.value.setRules(rules);
	})
	const submit = async () => {
		console.log(formData.value);
        // 1.
		// try { 
		// 	await seedForm.value?.validate?.()
		// 	console.log("校驗通過");
		// } catch (error){
		// 	console.log("校驗失敗");
		// }
        // 2.
		seedForm.value.validate().then(async ({ valid } : any) => {
			if (valid) {
				console.log("校驗失敗");
			} else {
				//驗證成功
				console.log("校驗成功");
			}
		});
        // 3.
		// seedForm.value.validate(valid => {
		// 	if (!valid) {
		// 		console.log("校驗成功");
		// 	} else {
		// 		console.log('驗證失敗');
		// 		console.log(valid);
		// 	}
		// });
        // 4.
		// seedForm.value.validate().then(res => {
		// 	console.log('表單數(shù)據(jù)信息：', res);
		// 	// 清除驗證
		// 	// form.value.clearValidate()
		// }).catch(err => {
		// 	console.log('表單錯誤信息：', err);
		// })
	}
</script>
<style>
</style>

2.原因及解決方式

表單綁定的數(shù)據(jù)不正確，外面需要套一層ref，聲明響應(yīng)式數(shù)據(jù)綁定到表單中。之前的那個寫法確實不報錯，但是不能把表單中輸入的數(shù)據(jù)更新到formData中，導(dǎo)致校驗一直報錯。

修改前：	
let formData = resetForm();
修改后：
let formData = ref(resetForm());

3.表單校驗方式（vue3）

定義校驗規(guī)則-》修改表單結(jié)構(gòu)-》綁定表單數(shù)據(jù)-》提交時校驗

表單規(guī)則中各個項目的id要和表單中form-item中的name屬性一致。

在vue中表單數(shù)據(jù)通過ref方式進(jìn)行定義。

表單中需要追加rule，ref及model，分別定義校驗規(guī)則，表單及表單綁定的數(shù)據(jù)

提交表單時校驗方式有好幾種。主要是先定義表單實例，通過表單實例中的value的validate判斷校驗是成功還是失敗。

我上面的代碼中一共有4中校驗方式。第二種前端會報錯，可以參照下其他幾種方式。

補充：

關(guān)于uniapp開發(fā)使用uni-ui組件表單校驗一直不通過的原因及解決方案

今天使用uniapp開發(fā)東西的時候，發(fā)現(xiàn)我的表單校驗一直通不過，后面才發(fā)現(xiàn)少東西了。我在uni-forms上少放了modelValue，但在官方文檔上沒有提示。所以要做驗證必須加這個屬性。

因為直接像下面這樣寫也是可以雙向綁定的，誰能想到，

<uni-easyinput  v-model="drawerData.name" placeholder="" />

uni-forms表單校驗必加屬性：

:rules=""http://這是校驗規(guī)則
:modelValue=""http://這是要校驗的數(shù)據(jù)對象
uni-forms-item 的name屬性和表單v-model的屬性值保持一直
<uni-forms ref="drawerform" label-width="80" :rules="rules" class="drawer-form" :model="drawerData">

rules: {//表單校驗規(guī)則
                    name: {
                        rules: [{
                                required: true,
                                errorMessage: '請輸入商品名稱',
                                trigger: ['blur', 'change']
                            },
                            {
                                minLength: 2,
                                errorMessage: '名稱兩個字符以上',
                            }
                        ],
                        label:"商品名稱"
                    },
}

至于校驗規(guī)則根據(jù)官方網(wǎng)站來就行了，細(xì)心一點就沒問題

到此這篇關(guān)于uni-app中vue3表單校驗失敗的文章就介紹到這了,更多相關(guān)uni-app表單校驗失敗內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: