文章目录

前言

我们在开发过程中使用element UI 或者element-plus 中的表单的时候，会使用到表单验证，比如手机号和邮箱的验证；

手机号和邮箱的自定义验证

使用很简单，我们首先要在el-form中使用rules,然后再data中定义rules,使用pattern子定义验证逻辑字段

<el-dialog :title="title" v-model="open" width="720px" append-to-body><el-form ref="useRef" :model="form" :rules="rules" label-width="100px"><el-row><el-col :span="24"><el-form-item label="手机号" prop="mobile"><el-input v-model="form.mobile" placeholder="请输入手机号" clearable /></el-form-item></el-col><el-col :span="24"><el-form-item label="邮箱" prop="email"><el-input v-model="form.email" placeholder="请输入邮箱" clearable/></el-form-item></el-col><el-row/></el-form><template #footer><div class="dialog-footer"><el-button @click="cancel">取 消</el-button><el-button type="primary" @click="submitForm">保 存</el-button></div></template></el-dialog><script setup>const data = reactive({form = {mobile:undefined,email:undefined},rules: {mobile:[{required:true,message: "请输入手机号码", trigger: "blur"},{pattern:/(^((\+86)|(86))?(1[3-9])\d{9}$)|(^(0\d{2,3})-?(\d{7,8})$)/,message: '输入的手机号码格式不正确，请重新输入',trigger:'blur'}],email:[{pattern:/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9_\.\-])+\.)+([a-zA-Z0-9]{2,4})+$/,message:'请输入正确的邮箱格式',trigger:'blur'}]}});const {form} = toRefs(data);<script/>