elementUI 自定义表单数组校验

### ElementUI 中通过自定义方法实现表单验证 在 Vue 后台管理系统开发中，ElementUI 是常用的 UI 组件库之一。当内置的校验规则无法满足特定业务需求时，可以通过自定义校验规则来扩展功能。 #### 定义自定义校验规则 在 `rules` 属性中可以为字段指定校验规则数组，在其中添加带有 `validator` 函数的对象即可完成自定义校验逻辑[^1]。以下是具体实现方式： 1. **绑定 Form 的 rules 和 model** 需要在 `<el-form>` 上绑定 `model` 数据对象以及 `rules` 校验规则。 2. **编写 validator 方法** 使用 `validator` 参数传入一个函数，该函数接收三个参数：`rule`, `value`, 和 `callback`。根据实际逻辑判断输入值是否合法，并调用 `callback` 返回结果。 3. **触发校验** 当用户提交表单或者手动触发表单项的校验时，会执行对应的 `validator` 方法。 #### 示例代码 以下是一个完整的示例，展示如何使用自定义校验规则验证用户名长度和密码复杂度： ```vue <template> <div> <el-form :model="form" :rules="rules" ref="formRef"> <el-form-item label="用户名" prop="username"> <el-input v-model="form.username"></el-input> </el-form-item> <el-form-item label="密码" prop="password"> <el-input type="password" v-model="form.password"></el-input> </el-form-item> <el-button @click="submitForm">提交</el-button> </el-form> </div> </template> <script> export default { data() { // 用户名校验器 const validateUsername = (rule, value, callback) => { if (!value || value.length < 4) { callback(new Error('用户名至少需要四个字符')); } else { callback(); } }; // 密码校验器 const validatePassword = (rule, value, callback) => { const regex = /^(?=.*\d)(?=.*[a-zA-Z]).{8,}$/; if (!regex.test(value)) { callback( new Error('密码必须包含字母和数字，且长度不少于八个字符') ); } else { callback(); } }; return { form: { username: '', password: '' }, rules: { username: [{ required: true, message: '请输入用户名', trigger: 'blur' }], password: [ { required: true, message: '请输入密码', trigger: 'blur' }, { validator: validatePassword, trigger: 'blur' } ] } }; }, methods: { submitForm() { this.$refs.formRef.validate((valid) => { if (valid) { alert('提交成功'); } else { console.log('表单校验失败'); return false; } }); } } }; </script> ``` 上述代码展示了两个自定义校验规则的应用场景： - 对于用户名字段，要求其长度不得少于四个字符； - 对于密码字段，则需确保它既包含了字母又含有数字，同时总长度不低于八位。 #### 注意事项 - 如果存在多个条件约束同一个字段的情况，可以在同一项下设置多条规则。 - 自定义校验中的错误提示信息可通过抛出带消息字符串的 `Error` 实现。