el-form 表单 手机号 验证

### Vue3 中使用 Element Plus 的 `el-form` 组件实现手机号和邮箱的校验 为了在 Vue3 和 Element Plus 中设置表单校验规则，可以按照如下方式配置： #### 创建 Form 数据模型 定义数据对象用于存储输入框中的值。 ```javascript const form = reactive({ phone: '', email: '' }); ``` #### 定义校验规则 通过 `rules` 对象来指定各个字段的具体校验逻辑。对于手机号码和电子邮件地址，通常会应用正则表达式来进行格式验证。 ```javascript import { required, pattern } from '@vuelidate/validators'; // 假设引入了 vuelidate 库作为辅助工具 // 或者自定义函数形式的validator function validateEmail(value) { const regex = /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/; return regex.test(String(value).toLowerCase()); } function validatePhone(value) { const regex = /^1\d{10}$/; // 简化的中国大陆手机格式匹配 return regex.test(String(value)); } const rules = computed(() => ({ phone: [ { validator: validatePhone, message: '请输入有效的手机号', trigger: ['blur'] } ], email: [ { type: 'email', message: '请输入合法的邮箱地址', trigger: ['blur', 'change'] }, { validator: validateEmail, message: '请输入有效的电子邮箱', trigger: ['blur'] } ] })); ``` #### 设置模板结构并关联 Refs 及 Rules 属性 确保 `<el-form>` 标签内包含了必要的属性绑定，以便能够正确触发校验流程[^1]。 ```html <template> <div class="demo"> <el-form :model="form" :rules="rules" ref="ruleFormRef"> <!-- 手机号码 --> <el-form-item label="手机号" prop="phone"> <el-input v-model="form.phone"></el-input> </el-form-item> <!-- 邮箱 --> <el-form-item label="邮箱" prop="email"> <el-input v-model="form.email"></el-input> </el-form-item> <el-button @click="submitForm">提交</el-button> </el-form> </div> </template> ``` #### 提交按钮事件处理程序 当点击提交按钮时调用此方法执行整个表单的有效性检查，并根据结果采取相应操作。 ```javascript async function submitForm() { try { await ruleFormRef.value.validate((valid) => { if (valid) { console.log('submit!'); } else { console.error('error submit!!'); return false; } }); } catch (err) { console.warn(err); } } ``` 以上就是如何利用 Vue3 结合 Element Plus 来构建带有手机号和邮件地址校验功能的表单项的方法[^2]。