Vue ElementUI フォームのフォーム検証

el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
  <el-フォーム項目
    prop="メール"
    label="メールボックス"
    :ルール="[
      { 必須: true、メッセージ: 'メールアドレスを入力してください'、トリガー: 'blur' },
      { type: 'email'、message: '有効なメールアドレスを入力してください'、trigger: ['blur'、'change'] }
    ]"
  >
    <el-input v-model="dynamicValidateForm.email"></el-input>
  </el-form-item>
  <el-フォーム項目
    v-for="(domain, index) in dynamicValidateForm.domains"
    :label="'ドメイン名' + インデックス"
    :key="ドメイン.キー"
    :prop="'ドメイン' + インデックス + '.値'"
    :ルール="{
      必須: true、メッセージ: 'ドメイン名は空にできません'、トリガー: 'blur'
    }"
  >
    <el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">削除</el-button>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('dynamicValidateForm')">送信</el-button>
    <el-button @click="addDomain">新しいドメイン名を追加</el-button>
    <el-button @click="resetForm('dynamicValidateForm')">リセット</el-button>
  </el-form-item>
</el-form>
<スクリプト>
  エクスポートデフォルト{
    データ（） {
      戻る {
        動的検証フォーム: {
          ドメイン: [{
            価値： ''
          }],
          メールアドレス: ''
        }
      };
    },
    メソッド: {
      送信フォーム(フォーム名) {
        this.$refs[formName].validate((valid) => {
          （有効）の場合{
            alert('送信!');
          } それ以外 {
            console.log('送信エラー!!');
            false を返します。
          }
        });
      },
      resetForm(フォーム名) {
        this.$refs[フォーム名].resetFields();
      },
      ドメインを削除します(アイテム) {
        var インデックス = this.dynamicValidateForm.domains.indexOf(item)
        （インデックス!== -1）の場合{
          this.dynamicValidateForm.domains.splice(インデックス、1)
        }
      },
      ドメインを追加します（）{
        this.dynamicValidateForm.domains.push({
          価値： ''、
          キー: Date.now()
        });
      }
    }
  }
</スクリプト>