快捷導(dǎo)航

uni-app中vue3表單校驗(yàn)失敗的問(wèn)題及解決方法

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

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

1.問(wèn)題

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

代碼：

<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="請(qǐng)輸入姓名" />
			</uni-forms-item>
			<uni-forms-item label="郵箱" name="email">
				<input class="input" v-model="formData.email" type="text" placeholder="請(qǐng)輸入郵箱" />
			</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 = {
		// 對(duì)name字段進(jìn)行必填驗(yàn)證
		name: {
			rules: [{
				required: true,
				errorMessage: '請(qǐng)輸入姓名'
			},
			{
				minLength: 3,
				maxLength: 5,
				errorMessage: '姓名長(zhǎng)度在 {minLength} 到 {maxLength} 個(gè)字符'
			}],
		},
		// 對(duì)email字段進(jìn)行必填驗(yàn)證
		email: {
			rules: [{
				required: true,
				errorMessage: '請(qǐng)輸入郵箱'
			}],
		}
	};
	onReady(() => {
		seedForm.value.setRules(rules);
	})
	const submit = async () => {
		console.log(formData.value);
        // 1.
		// try { 
		// 	await seedForm.value?.validate?.()
		// 	console.log("校驗(yàn)通過(guò)");
		// } catch (error){
		// 	console.log("校驗(yàn)失敗");
		// }
        // 2.
		seedForm.value.validate().then(async ({ valid } : any) => {
			if (valid) {
				console.log("校驗(yàn)失敗");
			} else {
				//驗(yàn)證成功
				console.log("校驗(yàn)成功");
			}
		});
        // 3.
		// seedForm.value.validate(valid => {
		// 	if (!valid) {
		// 		console.log("校驗(yàn)成功");
		// 	} else {
		// 		console.log('驗(yàn)證失敗');
		// 		console.log(valid);
		// 	}
		// });
        // 4.
		// seedForm.value.validate().then(res => {
		// 	console.log('表單數(shù)據(jù)信息：', res);
		// 	// 清除驗(yàn)證
		// 	// form.value.clearValidate()
		// }).catch(err => {
		// 	console.log('表單錯(cuò)誤信息：', err);
		// })
	}
</script>
<style>
</style>

2.原因及解決方式

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

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

3.表單校驗(yàn)方式（vue3）

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

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

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

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

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

我上面的代碼中一共有4中校驗(yàn)方式。第二種前端會(huì)報(bào)錯(cuò)，可以參照下其他幾種方式。

補(bǔ)充：

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

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

因?yàn)橹苯酉裣旅孢@樣寫也是可以雙向綁定的，誰(shuí)能想到，

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

uni-forms表單校驗(yàn)必加屬性：

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

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

至于校驗(yàn)規(guī)則根據(jù)官方網(wǎng)站來(lái)就行了，細(xì)心一點(diǎn)就沒(méi)問(wèn)題

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

您可能感興趣的文章: