Vue3表单校验大全,含对象嵌套对象验证、数组格式验证、动态添加验证等

举报
码喽的自我修养 发表于 2024/07/15 19:22:06 2024/07/15
【摘要】 大家好,我是码喽的自我修养!今天给大家分享vue3 表单校验大全,含对象嵌套对象验证、数组格式验证、动态添加验证规则、validateField 验证具体的某个某些字段等,由浅入深详细讲解!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到带大家,欢迎收藏+关注哦 💕

一、常规验证

1.关键参数 

  • model 表单数据对象
  • rules 验证对象
  • prop 需要验证的键名

2.示例代码

<template>
	<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules">
		<el-form-item label="手机号" prop="mobile">
			<el-input v-model="ruleForm.mobile" />
		</el-form-item>
		<el-form-item label="密码" prop="pass">
			<el-input v-model="ruleForm.pass" type="password" />
		</el-form-item>
		<el-form-item>
			<el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
		</el-form-item>
	</el-form>
</template>
 
<script lang="ts" setup>
import { reactive, ref } from "vue";
import type { FormInstance, FormRules } from "element-plus";
 
const phoneRegular = /^1[23456789]\d{9}$/;
 
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive({
	mobile: "",
	pass: "",
});
 
function customMobile(_: any, value: any, callback: any) {
	if (phoneRegular.test(value)) callback();
	else callback(new Error("请输入正确的手机号"));
}
const rules = reactive<FormRules<typeof ruleForm>>({
	mobile: [
		{ required: true, message: "请输入手机号", trigger: ["blur", "change"] },
		// 正则
		{ pattern: phoneRegular, message: "请输入正确的手机号", trigger: ["blur", "change"] },
		// 自定义验证
		{ validator: customMobile, trigger: ["blur", "change"] },
	],
	pass: [{ required: true, message: "请输入密码", trigger: ["blur", "change"] }],
});
 
const submitForm = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.validate((valid) => {
		if (valid) {
			console.log("submit!");
		} else {
			console.log("error submit!");
			return false;
		}
	});
};
</script>

3.正则验证

const phoneRegular = /^1[23456789]\d{9}$/;
 
const rules = reactive<FormRules<typeof ruleForm>>({
	mobile: [
		// 正则
		{ pattern: phoneRegular, message: "请输入正确的手机号", trigger: ["blur", "change"] },
	]
});

4.自定义函数验证

const phoneRegular = /^1[23456789]\d{9}$/;
function customMobile(_: any, value: any, callback: any) {
	if (phoneRegular.test(value)) callback();
	else callback(new Error("请输入正确的手机号"));
}
const rules = reactive<FormRules<typeof ruleForm>>({
	mobile: [
		// 自定义验证
		{ validator: customMobile, trigger: ["blur", "change"] },
	]
});

二、特殊验证

1.对象嵌套对象验证写法

<template>
	<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules">
		<el-form-item label="手机号" prop="mobile">
			<el-input v-model="ruleForm.mobile" />
		</el-form-item>
		<el-form-item label="密码" prop="user.pass">
			<el-input v-model="ruleForm.user.pass" type="password" />
		</el-form-item>
		<el-form-item>
			<el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
		</el-form-item>
	</el-form>
</template>
 
<script lang="ts" setup>
const ruleForm = reactive({
	mobile: "",
 
	user: {
		pass: "",
	},
});
 
const rules = reactive<FormRules<typeof ruleForm>>({
	mobile: [{ required: true, message: "请输入手机号", trigger: ["blur", "change"] }],
	"user.pass": [{ required: true, message: "请输入密码", trigger: ["blur", "change"] }],
});
</script>

2.数据结构为数组验证写法

<template>
	<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules">
		<el-form-item label="图片" prop="images">
			<div>请选择图片</div>
		</el-form-item>
		<el-form-item>
			<el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
			<el-button type="primary" @click="ruleForm.images.push('http:')">追加 images {{ ruleForm.images }}</el-button>
		</el-form-item>
	</el-form>
</template>
 
<script lang="ts" setup>
import { reactive, ref } from "vue";
import type { FormInstance, FormRules } from "element-plus";
 
interface RuleForm {
	images: string[];
}
const ruleFormRef = ref<FormInstance>();
const ruleForm: RuleForm = reactive({
	images: [],
});
 
const rules = reactive<FormRules<typeof ruleForm>>({
	images: [
		{ required: true, message: "请上传图片", trigger: ["blur", "change"] },
		// 定义类型必填 array ,数组 length 必须为 2
		{ type: "array", len: 2, message: "请上传两张图片", trigger: ["blur", "change"] },
		// 验证数组范围 2-4
		{ type: "array", min: 2, max: 4, message: "请上传2-4张图片", trigger: ["blur", "change"] },
	],
});
 
const submitForm = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.validate((valid) => {
		if (valid) {
			console.log("submit!");
		} else {
			console.log("error submit!");
			return false;
		}
	});
};
</script>
 

3.validateField 验证具体的某个某些字段

import type { FormInstance } from 'element-plus';
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive({
	mobile: "",
	pass: "",
});
 
ruleFormRef?.value?.validateField(['mobile'], flag => {
	// flag true 全部验证通过, false 验证不通过
})
 
// 验证多个写法
ruleFormRef?.value?.validateField(['mobile','pass'], flag => {})

4.动态切换是否需要添加验证规则

动态修改 rules,而不是修改 prop

<template>
	<el-form ref="ruleFormRef" :model="ruleForm">
		<el-form-item label="手机号" prop="mobile" :rules="flag ? rules['mobile'] : ruleEmpty">
			<el-input v-model="ruleForm.mobile" />
		</el-form-item>
		<el-form-item label="密码" prop="pass" :rules="flag ? rules['pass'] : ruleEmpty">
			<el-input v-model="ruleForm.pass" type="password" />
		</el-form-item>
		<el-form-item>
			<el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
 
			<el-button type="primary" @click="flag = !flag">切换 flag {{ flag }}</el-button>
		</el-form-item>
	</el-form>
</template>
 
<script lang="ts" setup>
import { reactive, ref } from "vue";
import type { FormInstance, FormRules } from "element-plus";
 
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive({
	mobile: "",
	pass: "",
});
 
const flag = ref(true);
const ruleEmpty = { required: false };
const rules = reactive<FormRules<typeof ruleForm>>({
	mobile: [{ required: true, message: "请输入手机号", trigger: ["blur", "change"] }],
	pass: [{ required: true, message: "请输入密码", trigger: ["blur", "change"] }],
});
 
const submitForm = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.validate((valid) => {
		if (valid) {
			console.log("submit!");
		} else {
			console.log("error submit!");
			return false;
		}
	});
};
</script>
 

 好了,本文就到这里吧,点个关注再走嘛~  

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。