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

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;
  }
});

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

1 个答案: