Ao desenvolver, o botão enviar do formulário não está necessariamente no formulário, portanto, a função de acionar a verificação quando o botão está fora do formulário deve ser realizada. Cole o código diretamente da seguinte maneira
parte html:
<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>
parte js:
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;
}
});
}
}
}
}
Clique no botão Salvar para acionar a validação do formulário
