2

我正在尝试在我的一个 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..
        }
    }
});
4

1 回答 1

9

这是 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;
  }
});
于 2018-08-30T05:43:03.250 回答