如何调用元素 UI 表单的验证方法

Question

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

任何人都可以指导我一个例子，如何在 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

这是指向元素 UI 文档中验证示例的链接

您需要像这样在表单中添加 ref 属性：

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

然后，当您单击在您的情况下调用next方法的提交按钮时，您可以像这样验证您的表单：

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