vue中的表单手机号和邮箱自定义验证规则

前言

我们在开发过程中使用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/>