vue3 element表单验证js写法

### Vue3 中使用 Element UI 进行表单验证 在 Vue3 和 Element Plus 组合下，表单验证可以通过 `el-form` 及其子组件如 `el-form-item` 来完成。为了使表单具备验证能力，在定义 `<el-form>` 时需指定 `model` 属性用于关联数据对象，并设置 `rules` 定义具体的验证规则[^4]。 对于每一个需要验证的输入项，则应在对应的 `<el-form-item>` 上指明该字段名（prop），这使得能够针对特定字段应用预设好的规则集。当调用 `validate()` 方法时，它会遍历所有带有 prop 的 form item 并执行相应的检验逻辑： ```javascript // JavaScript部分 import { ref, reactive } from 'vue'; import { ElMessage } from 'element-plus'; export default { setup() { const ruleForm = reactive({ name: '', region: '', date1: '', date2: '', delivery: false, type: [], resource: '', desc: '' }); const rules = reactive({ name: [ { required: true, message: '请输入活动名称', trigger: 'blur' }, { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' } ], region: [ { required: true, message: '请选择活动区域', trigger: 'change' } ] }); const validateForm = async () => { try { await formRef.value.validate(); ElMessage.success('提交成功'); } catch (error) { console.error(error); ElMessage.error('验证失败，请检查表单项'); } }; return { ruleForm, rules, validateForm, formRef: ref(null), }; } }; ``` 模板中的代码如下所示： ```html <template> <el-form :model="ruleForm" :rules="rules" ref="formRef"> <!-- 表单项 --> <el-form-item label="活动名称" prop="name"> <el-input v-model="ruleForm.name"></el-input> </el-form-item> <el-form-item label="活动区域" prop="region"> <el-select v-model="ruleForm.region" placeholder="请选择活动区域"> <el-option label="区域一" value="shanghai"></el-option> <el-option label="区域二" value="beijing"></el-option> </el-select> </el-form-item> <!-- 提交按钮触发验证 --> <el-button @click.prevent="validateForm">立即创建</el-button> </el-form> </template> ``` 此示例展示了如何配置基本的表单及其验证机制，同时也包含了错误提示处理的方式。每当用户尝试提交表单时，都会先经过一轮完整的验证流程；只有全部条件都满足的情况下才会显示成功的消息框。