### 如何在 `el-form` 中通过 `rules` 属性添加正则表达式进行表单验证 #### 定义规则对象 为了实现表单验证，在 Vue 组件的数据选项 (`data`) 中定义一个名为 `rules` 的对象。此对象包含了各个字段对应的验证规则。 ```javascript export default { data() { return { form: { carNum: '' }, rules: { carNum: [ { required: true, message: '请输入车牌号', trigger: 'blur' }[^1], { pattern: /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵青藏川宁琼使领A-Z]{1}[A-Z]{1}[警ASSS挂学军港澳]{0,1}[A-Z0-9]{4}[A-Z0-9挂学警]{1}$/, message: '车牌号码格式不正确', trigger: 'blur' } ] } }; } } ``` 上述代码展示了如何设置 `carNum` 字段的两个验证条件：一个是必填项验证；另一个则是基于给定模式（即中国车牌的标准格式）的正则匹配验证。 #### 将规则应用于表单组件 接着，把创建好的 `rules` 对象绑定到 `<el-form>` 上，并指定要应用这些规则的具体表单项： ```html <template> <div class="app-container"> <!-- Form --> <el-form :model="form" :rules="rules" ref="ruleFormRef" label-width="80px"> <el-form-item label="车牌号" prop="carNum"> <el-input v-model="form.carNum"></el-input> </el-form-item> <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button> </el-form> </div> </template> ``` 这里使用了 `prop` 属性指定了哪个字段应该遵循相应的验证逻辑。当点击按钮触发 `submitForm()` 方法时会执行验证操作。 #### 提交并处理验证结果 最后一步是编写方法来响应用户的提交动作以及展示错误提示信息： ```javascript methods: { submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { alert('提交成功!'); } else { console.log('error submit!!'); return false; } }); } } ``` 这段 JavaScript 函数会在用户尝试提交之前调用 Element UI 内置的方法来进行前端验证。如果所有输入都有效，则继续后续流程；如果有任何一项不符合设定的要求，则阻止提交并向用户提供反馈。