### 如何在 Element UI 的 `el-form` 中添加正则表达式作为表单验证规则 为了实现通过正则表达式对特定字段进行校验，在 `el-form` 组件中的 `rules` 配置项里可以指定 `pattern` 来设置正则表达式的匹配条件[^1]。 对于更复杂的场景或者当内置的验证方式无法满足需求时，则可以在 JavaScript 函数内部编写逻辑并将其注册到 rules 下对应的属性上。下面是一个关于手机号码验证的例子，展示了如何创建一个名为 `isMobile` 的函数来进行自定义校验，并且该方法被放置于 `/utils/validate.js` 文件中以便重用[^2]： ```javascript // /utils/validate.js export function isCarNumber(rule, value, callback) { const carPattern = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵青藏川宁琼使领A-Z]{1}[A-Z]{1}[警ASSS挂学军港澳]{0,1}[A-Z0-9]{4}[A-Z0-9挂学电]{1}$/.test(value); if (!value || !carPattern) { return callback(new Error('请输入合法的车牌号码')); } callback(); } ``` 接着是在 Vue 单文件组件内的使用实例： ```vue <template> <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm"> <!-- 车牌号输入框 --> <el-form-item label="车牌号：" prop="carNum"> <el-input v-model="ruleForm.carNum"></el-input> </el-form-item> <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button> </el-form> </template> <script> import { isCarNumber } from '@/utils/validate'; export default { data() { var validatePass = (rule, value, callback) => { if (value === '') { callback(new Error('此项不能为空')); } else { callback(); } }; return { ruleForm: { carNum: '' }, rules: { carNum: [ { validator: validatePass, trigger: 'blur' }, // 空值检验 { validator: isCarNumber, trigger: 'blur' } // 自定义正则检验 ] } }; }, }; </script> ``` 上述代码片段实现了两个功能：一是确保用户必须填写车牌号；二是利用自定义的 `isCarNumber` 方法检查所填入的内容是否符合中国现行标准下的车牌格式要求[^1]。