From表单验证报错：[Element Warn][Form]model is required for validate to work!

          
            手机号码
            

          

      this.$refs.from.validate(valid => {
        if (valid) {
           console.log('valid', valid)
        } else {
           console.log('valid', valid)
        }
      })

在使用element-ui里的from表单验证的时候，明明已经按照文档，将module、rules和v-module各项参数都设置正确了，但是一直验证不通过，打印this.$refs.refFrom.validate，显示如下结果：

validate ƒ validate(callback) {
      var _this2 = this;

      if (!this.model) {
        console.warn('[Element Warn][Form]model is required for validate to work!');
        return;
      }

      var promise…

在网上查找，普遍是以下几点原因：

• 标签里不是使用的module而是使用v-module导致的。
• 标签里没有使用v-module导致的。
• 标签里prop参数的命名没有和标签里module数据源对象里的一致。

但是我再三检查，还是没发现我的代码有以上这几点问题，而我在使用手机号码输入框来调试解决问题的时候发现，当我输入错误格式的手机号码时，打印valid，显示为false，但是当我输入正确格式的手机号码时，却没有执行到 console.log('valid', valid) 这一行代码，我一下子醒悟过来，应该是我checkMobile里缺少return输入正确格式的手机号码时的回调了callback了，一检查还真是，这就是我为什么要记下这个事的原因，其实这个问题去年就遇到过，当时也是这样发现，然后解决掉的，只是当时并没有记录下来，所以想要学好，多做总结是很有益的。只需修改checkMobile，加上正确格式手机号码的验证即可，如下所示：

    let checkMobile = (rule, value, callback) => {
      if (value === '') {
        return callback(new Error('请输入手机号码'))
        // 正则验证
      } else if (!validate.isPhone(this.inputUserInfo.mobile)) {
        return callback(new Error('手机号码格式不正确，请重新输入'))
        // 如果手机号码格式正确，验证通过
      } else {
        return callback()
      }
    }