vue添加用戶校驗（element-ui）

data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('請輸入密碼'))
      } else {
        if (this.form.checkPass !== '') {
          this.$refs.addForm.validateField('checkPass')
        }
        callback()
      }
    }
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('請再次輸入密碼'))
      } else if (value !== this.form.password) {
        callback(new Error('兩次輸入密碼不一致!'))
      } else {
        callback()
      }
    }
    var checkphone = (rule, value, callback) => {
      // let phoneReg = /(^1[3|4|5|6|7|8|9]\d{9}$)|(^09\d{8}$)/;
      if (value === '') {
        callback(new Error('請輸入手機號'))
      } else if (!this.isCellPhone(value)) {
        //引入methods中封裝的檢查手機格式的方法
        callback(new Error('請輸入正確的手機號!'))
      } else {
        callback()
      }
    }
    return {//添加用戶的表單對象
      form: {},
      rules: {
        username: [
          { required: true, message: '請輸入用戶名', trigger: 'blur' },
          { min: 3, max: 5, message: '長度在 3 到 5 個字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '請輸入密碼', trigger: 'blur' },
          { validator: validatePass, trigger: 'blur' }
        ],
        checkPass: [
          { required: true, message: '請輸入確認密碼', trigger: 'blur' },
          { validator: validatePass2, trigger: 'blur' }
        ],
        email: [
          { required: true, message: '請輸入郵箱', trigger: 'blur' },
          {
            type: 'email',
            message: '請輸入正確的郵箱地址',
            trigger: ['blur', 'change']
          }
        ],
        mobile: [
          { required: true, message: '請輸入手機號', trigger: 'blur' },
          {
            validator: checkphone,
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {//檢查手機號
    isCellPhone(val) {
      if (!/^1(3|4|5|6|7|8)\d{9}$/.test(val)) {
        return false
      } else {
        return true
      }
    }
  }