vue2.X+elementUI表单自定义验证

一般情况下(form中的组件都是element提供的组件)在使用elm的表单校验时我们是这么使用的： 

 <!--对话框关闭事件绑定 @close="addUserDialogClose" -->
    <el-dialog title="添加用户信息" :visible.sync="addDialogVisible" >
      <!-- 内容主体区域 -->
      <el-form
        :model="addUserForm"
        :rules="addUserRules"
        ref="addUserRuleForm"
        label-width="100px"
      >
        <el-form-item label="用户名称" prop="name">
          <el-input v-model="addUserForm.name"></el-input>
        </el-form-item>
        <el-form-item label="角色" prop="role" >
          <el-input v-model="addUserForm.role" ></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="addUserForm.email"></el-input>
        </el-form-item>
        <el-form-item label="手机" prop="phone">
          <el-input v-model="addUserForm.phone"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="danger" @click="resetaddUserDialog">重置</el-button>
        <el-button type="primary" @click="addUser"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <script>
        data() {
    //自定义验证邮箱的规则
    var checkEmail = (rule,value,cb) => {
      // 验证邮箱的正则表达式
    const  reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
    if(reg.test(value)){
      return cb()
    }
    cb(new Error('请输入合法邮箱'))
    }
    // 自定义验证手机号的规则
    var checkPhone = (rule,value,cb) => {
      // 验证手机号的正则表达式
      const phoneReg  = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      if(phoneReg.test(value)){
        return cb()
      }
      cb(new Error('请输入正确的手机号'))
    }
    return {
      editDialogVisible:false,
      addUserForm:{
        name:'',
        role:'',
        email:'',
        phone:''
      },
      addUserRules:{
        name:[
           { required: true, message: '请输入用户名称', trigger: 'blur' },
           { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
        ],
        role:[
           { required: true, message: '请输入角色名称', trigger: 'blur' },
           { min: 2, max: 15, message: '长度在 2 到 15 个字符', trigger: 'blur' }
        ],
        email:[
           { required: true, message: '请输入用户邮箱', trigger: 'blur' },
           { validator: checkEmail, trigger: 'blur' }
        ],
        phone:[
           { required: true, message: '请输入用户电话', trigger: 'blur' },
           { validator: checkPhone, trigger:'blur'}
         ]
      }
}
    </script>