### Vue3 中 `el-form` 实现电话号码和固话输入校验 为了实现在 `Vue3` 的 `el-form` 组件中对电话号码和固定电话的有效性验证，可以定义特定的正则表达式来匹配这两种类型的输入。通过配置表单字段的 `rules` 属性并指定自定义验证函数或直接应用预设模式来进行数据合法性检查。 对于电话号码（手机号），通常遵循中国大陆的标准格式：11位数字，以1开头；而对于固定电话，则可能包含区号在内的多位数字符串，并且一般会有一个分隔符如破折号连接不同部分[^1]。 下面是一个基于上述需求的具体实现案例： ```html <template> <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleFormRef"> <!-- 手机号 --> <el-form-item label="手机号码" prop="mobilePhone"> <el-input v-model="ruleForm.mobilePhone"></el-input> </el-form-item> <!-- 固定电话 --> <el-form-item label="固定电话" prop="landlinePhone"> <el-input v-model="ruleForm.landlinePhone"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button> </el-form-item> </el-form> </template> <script setup lang="ts"> import { reactive, ref } from 'vue' import type { FormInstance } from 'element-plus' const ruleFormRef = ref<FormInstance>() interface RuleForm { mobilePhone?: string; landlinePhone?: string; } const validateMobilePhone = (rule: any, value: string, callback: Function) => { const reg = /^1\d{10}$/; // 正则表达式用于检验手机号 if (!value || !reg.test(value)) { return callback(new Error('请输入有效的手机号')); } callback(); }; const validateLandlinePhone = (rule: any, value: string, callback: Function) => { const reg = /^(0\d{2,3}-)?\d{7,8}(-\d+)?$/; // 正则表达式用于检验固定电话 if (!value || !reg.test(value)) { return callback(new Error('请输入有效的固定电话')); } callback(); }; const ruleForm = reactive<RuleForm>({ }); const rules = reactive({ mobilePhone: [{ validator: validateMobilePhone, trigger: 'blur' }], landlinePhone: [{ validator: validateLandlinePhone, trigger: 'blur' }] }) const submitForm = async (formEl: FormInstance | undefined) => { if (!formEl) return; await formEl.validate((valid) => { if (valid) console.log('success!'); else console.log('error submit!!'); }); }; </script> ``` 此代码片段展示了如何创建一个简单的表单，该表单具有两个文本框分别接收用户的手机和固定电话信息，并设置了相应的验证规则确保这些信息符合预期格式。当用户尝试提交表单时，如果任一字段不符合设定条件，则会在界面上给出提示消息直到满足所有约束为止。