vueについてjs element uiフォームthis.$の検証refs[formName].validate()の問題

方法を使用する前に、次のことを理解する必要があります.
「ソース」と「編集者」のヒント:
まずこれを印刷します.refs[formName]では、検証が必要なformが正しいかどうかを確認します.
次に、正しいformを取得した後、そのformに追加されたフォームの検証が正しいかどうかを確認します.注意しなければならない点は、次のとおりです.
1.このメソッドを使用する前にpropをチェックするには、必ず上に書かなければなりません.中のinputに書かれているか、他のどこにも書かれていません(el-form-item propプロパティバインド)
2.el-form rules,model属性バインド,ref識別
カスタムフォーム検証のピット:
一.validate/resetFieldsは定義されていません.
1:検証するDOMは、まだロードされていません.
2:this.$refs[ruleForm].validate()方式が認識されない可能性があります.使用する必要があります:this.$refs.ruleForm.validate();この方法は、あなたたちが望んでいる結果ではありません.
解決策:

this.ticketDialog = true;

//         ，                   

this.$nextTick(function() {

  this.$refs.ticketInfoForm.resetFields();

})

または:this.$refs[ruleForm].validate()
方式が認識されない.次の操作が必要です.this.$refs.ruleForm.validate()
;
次のようになります.

methods: {   

  submitForm(ruleForm2) {

    //   this.$refs[ruleForm2].validate();  

    //      ，   。validate   

    //  this.$refs.ruleForm2.validate();   。

    this.$refs[ruleForm2].validate((valid) => {

      if (valid) {

        alert('submit!');

      } else {

        console.log('error submit!!');

        return false;

      }

    });

  }

}

二.デジタルタイプの検証、macとwindowsシステムの互換性.
デジタルタイプの検証には、v-modelに.numberの修飾子を追加する必要があります.これは、Vue自身が提供するバインド値をnumberのタイプに変換する修飾子です.次のようになります.

不明な場合は、次のケースを参照してください.
html:

js:

var Main = {
    data() {
      var checkAge = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('      '));
        }
        setTimeout(() => {
          if (!Number.isInteger(value)) {
            callback(new Error('      '));
          } else {
            if (value < 18) {
              callback(new Error('    18 '));
            } else {
              callback();
            }
          }
        }, 1000);
      };
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('     '));
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('       '));
        } else if (value !== this.ruleForm.pass) {
          callback(new Error('         !'));
        } else {
          callback();
        }
      };
      return {
        ruleForm: {
          pass: '',
          checkPass: '',
          age: ''
        },
        rules: {
          pass: [
            { validator: validatePass, trigger: 'blur' }
          ],
          checkPass: [
            { validator: validatePass2, trigger: 'blur' }
          ],
          age: [
            { validator: checkAge, trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      submitForm(ruleForm) {
        //   this.$refs[ruleForm].validate();  
        //      ，   。validate   
        // 
        //  this.$refs.ruleForm.validate();   。
        this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$nextTick(function() {
          this.$refs[formName].resetFields();
         })
      }
    }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

、「(vue.js)element uiフォーム this$refs[formName]validate」の の さな の を しましたが、 なネットユーザーに つことを っています.