在Vue框架项目里通过Element Plus实现表单验证

科技前沿 • 2025-02-28 15:19 • 阅读 22

大家好，我是讯享网，很高兴认识大家。

最近一直在忙着做项目，在这个过程中也遇到了很多问题，之前虽然也有做笔记总结，但从未发过文章，这是第一次尝试，既为分享，也为记录，写得不好请各位多多指正。

言归正传，相信大家经常都会遇到要处理表单验证的环节，而我在最近的项目中也遇到需要做表单验证的业务，在此做一下小菜鸟的分享。

先上效果图：

讯享网

表单校验前的准备

首先可以先参考Element Plus官网表单组件的校验表单基本格式

地址：Form 表单 | Element Plus

准备过程总结为如下三步：

从element-plus中引入类型FormInstance和FormRules，并把表单对象的节点设置为FormInstance类型，表单内对所有参数约束的总规则（rules）设置为FormRules类型
定义包含表单内各参数的响应式数据对象ruleForm，并把ruleForm和rules在表单<el-form>标签的属性中进行单向数据绑定。此外需为表单参数对应的item设置相应的prop和v-model绑定对应ruleForm的参数
定义好提交表单的验证函数，官网例子中为submitForm函数和resetForm函数

<template> <div id="validator-form"> <!-- 以此为例 为表单对象设置ref以便后续获取该节点对象 并为表单对象添加ruleForm和rules的单向数据绑定 此外给姓名参数的item添加name的prop 以及v-model数据双向绑定ruleForm对应名的参数--> <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="520px" class="demo-ruleForm" :size="formSize" status-icon > <el-form-item label="姓名" prop="name"> <el-input v-model="ruleForm.name" placeholder="请输入名字"/> </el-form-item> ... </el-form> </div> </template> <script lang="ts" setup> import { reactive, ref } from "vue"; // 引入类型 import type { FormInstance, FormRules } from "element-plus"; const formSize = ref("default"); // 获取表单对象并设置为FormInstance类型 const ruleFormRef = ref<FormInstance>(); // 定义包含表单内各参数的响应式数据对象 用于保存表单参数 const ruleForm = reactive({ name: "", sex: "", height:"", weight:"", phone: "", time: "", email: "", birthday:"" }); // 定义包含所有参数规则的rules常量并设置为FormRules类型 const rules = reactive<FormRules>({...}) ... // 表单校验函数 const submitForm = async (formEl: FormInstance | undefined) => { if (!formEl) return; await formEl.validate((valid, fields) => { if (valid) { // 校验成功 console.log("submit!"); } else { // 校验失败 console.log("error submit!", fields); } }); }; //清除校验效果并且清空表单参数的函数 const resetForm = (formEl: FormInstance | undefined) => { if (!formEl) return; formEl.resetFields(); }; </script>

讯享网

在Vue框架项目里通过Element Plus实现表单验证

表单校验前的准备

准备过程总结为如下三步：

相关推荐