el-form自定义校验规则

### 实现 `el-form` 自定义校验规则 在 Element UI 的 `el-form` 组件中，通过配置 `rules` 属性可以设置表单字段的验证规则。对于更复杂的场景，则支持自定义校验逻辑。 #### 定义表单模型与初始数据结构 首先，在 Vue 组件的数据部分定义好表单对象以及对应的验证规则： ```javascript data() { return { form: { // 表单域 model 数据对象 name: '', email: '' }, rules: { // 验证规则对象 name: [ { required: true, message: '请输入活动名称', trigger: 'blur' } ], email: [ { validator: validateEmail, trigger: 'blur' } // 使用自定义函数作为validator属性值 ] }; }; } ``` 上述代码片段中的 `email` 字段指定了名为 `validateEmail` 的自定义校验器[^1]。 #### 编写自定义校验函数 接着创建用于执行特定业务逻辑判断的回调函数，并将其赋给相应字段下的 `validator` 参数： ```javascript // 假设这是位于 methods 或者外部导入的一个方法 function validateEmail(rule, value, callback) { const regExp = /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/; if (value === '') { callback(new Error('邮箱地址不能为空')); } else if (!regExp.test(value)) { callback(new Error('请输入合法的电子邮件地址')); } else { callback(); // 如果输入有效则调用callback不带参数表示成功 } } ``` 此函数接收三个参数：当前规则描述、待检字符串和错误处理程序。当检测到不符合条件的情况时应立即触发带有提示信息的 `callback()` 调用；反之如果一切正常只需简单地调用无参版即可[^2]。 #### HTML 结构展示 最后将这些配置应用至页面上的 `<el-form>` 标签里并指定关联关系： ```html <template> <div class="app-container"> <!-- 提交按钮 --> <button @click="submitForm">Submit</button> <!-- 表单主体 --> <el-form :model="form" status-icon :rules="rules" ref="ruleFormRef"> <el-form-item label="Name" prop="name"> <el-input v-model="form.name"></el-input> </el-form-item> <el-form-item label="E-mail" prop="email"> <el-input type="text" v-model="form.email"></el-input> </el-form-item> </el-form> </div> </template> ``` 这里需要注意的是要为整个表单组件赋予唯一的 `ref` 名字以便后续操作引用它来触发表单整体或者局部项目的合法性检查[^3]。