vue+element-ui 自定义校验规则实现邮箱验证

表单

  <div class="informa">
        <div class="tetli">经营者信息</div>
        <el-form-item label="门店负责人：" prop="contacts">
          <el-input v-model="ruleForm.contacts"  placeholder="请输入门店负责人"></el-input>
        </el-form-item>
        <el-form-item label="联系方式：" prop="contactPhone">
          <el-input v-model="ruleForm.contactPhone" placeholder="请输入联系方式" type="number"></el-input>
        </el-form-item>
        <el-form-item label="门店邮箱：" prop="email">
          <el-input v-model="ruleForm.email" placeholder="请输入邮箱"></el-input>
        </el-form-item>
      </div>

在data中自定义邮箱和手机的验证规则

 data() {
    //自定义的邮箱和手机验证规则
    let checkEmail = (rule, value,callback) =>{//验证邮箱
      const regEmail = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
      if(this.ruleForm.email != '' && !regEmail.test(this.ruleForm.email)) {
        callback(new Error('请输入有效的邮箱')); 
      }
    }
    return {
      rules: { 
         email:[{ required: true, message: '请输入邮箱', trigger: 'blur' },
        		{validator: checkEmail, trigger: "blur" }]}
    }