前言：哈喽，大家好，我是码喽的自我修养！今天给大家分享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>
好了，本文就到这里吧，点个关注再走嘛~ 
🚀 个人简介：7年开发经验，某大型国企前端负责人，信息系统项目管理师、CSDN优质创作者、阿里云专家博主，华为云云享专家，分享前端相关技术与工作常见问题~
💟 作 者：码喽的自我修养❣️
📝 专 栏：vue从基础到起飞
🌈 若有帮助，还请 关注➕点赞➕收藏 ，不行的话我再努努力💪💪💪
更多专栏订阅推荐：
👍 前端工程搭建
💕 javaScript深入研究✍️ GIS地图与大数据可视化
✈️ HTML5与CSS3
⭐️ uniapp与微信小程序
2174
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
