vue.js - 如何调用Element-UI表单的验证方法

Question

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

任何人都可以指导我如何引用 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是 Element 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;
  }
});