如何调用Element-UI表单的validate方法

Question

我正在尝试在我的一个Vue.js项目中使用Element-UI设计一些表单。在单击submit按钮后，在继续任何进一步操作之前，我想检查表单是否有效。

谁可以给我一个例子，如何引用Vue组件中的元素并检查它的有效性。

下面是我的表单设置。

 <div id="frmEventCreate">
 <el-form v-bind:model="data" v-bind:rules="rules">
    <el-form-item label="Event name" prop="name" required>
       <el-input v-model="data.name"></el-input>
    </el-form-item>

    <el-button type="success" v-on:click="next" icon="el-icon-arrow-right"> Next Step </el-button>
 </el-form>
 </div>

var objEvent = {neme: "Some Name"};
vmEventCreate = new Vue({
    el: '#frmEventCreate',
    data: {
        data: objEvent,
        rules: {
            name: [
                {required: true, message: 'Please input event name', trigger: 'blur'},
                {min: 10, max: 100, message: 'Length should be 10 to 100', trigger: 'blur'}
            ]
        },
    },
    methods: {
        next: function () {
            // need to check if the form is valid, here..
        }
    }
});

Answer 1

Here是元素UI文档中验证示例的链接

您需要向表单添加一个ref属性，如下所示：

 <el-form v-bind:model="data" v-bind:rules="rules" ref="someForm">

然后，当您单击submit按钮时，它将调用您的next方法，您可以像这样验证表单：

this.$refs['someForm'].validate((valid) => {
  if (valid) {
    alert('submit!');
  } else {
    console.log('error submit!!');
    return false;
  }
});