element-ui组件自定义表单验证(验证手机号码和邮箱为例)

      <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="70px">
        
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="addForm.email"></el-input>
        </el-form-item>
        <el-form-item label="手机" prop="mobile">
          <el-input v-model="addForm.mobile"></el-input>
        </el-form-item>
      </el-form>

   

 export default {
        data():{
         // 验证邮箱的规则
        var checkEmail = (rules,value,cb) => {
        // 验证邮箱的正则表达式
        const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
        if(regEmail.test(value)) {
          return cb()
        }
        cb(new Error('请输入合法的邮箱'))
      }
    // 验证手机号的规则
    var checkMobile = (rules,value,cb) => {
        const regMobile = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/

        if(regMobile.test(value)){
          return cb()
        }

        cb(new Error('请输入合法的手机号'))
      }
     }

     return{
         addFormRules: {
        
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          {validator:checkEmail,trigger:'blur'}
          
        ],
        mobile: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          {validator:checkMobile,trigger:'blur'}
        ],
      }
     }
    }

效果如图所示

输入错误的邮箱和手机号会提示

这是输入正确格式的手机号和邮箱