When developing, the submit button of the form form is not necessarily in the form, so the function of triggering the verification when the button is outside the form form should be realized. Directly paste the code as follows
html part:
<el-button @click.native="handleSave">保存</el-button>
<el-form :model="messageForm" :rules="messageFormRules" ref="messageForm" label-width="75px">
<el-col :span="12">
<el-form-item label="名称：" prop="apiName">
<el-input auto-complete="off" placeholder="请输入名称" v-model.trim="messageForm.apiName"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="分类：" prop="apiGroup">
<el-select v-model="messageForm.apiGroup" placeholder="请选择分类">
<el-option v-for="item in apiGroupList" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</el-form-item>
</el-col>
</el-form>
js part:
export default {
data () {
return {
messageForm: {
apiName: '',
apiGroup: '',
},
// 校验规则
messageFormRules: {
apiName: [{
required: true,
message: '请输入名称',
trigger: 'blur'
}],
apiGroup: [{
required: true,
message: '请选择分类',
trigger: 'blur'
}],
}
},
methods: {
// 保存
handleSave () {
this.$refs['messageForm'].validate((valid) => {
if (valid) {
} else {
return false;
}
});
}
}
}
}
Click the save button to trigger form validation
