element UI form表单的提交按钮不在form内,提交触发验证
前置条件:使用的是vue,浏览器是Chrome开发有时候,form表单的提交按钮不一定在form内,那么要实现当按钮在form表单外也要触发校验的功能。直接贴代码如下html部分:<el-button @click.native="handleSave">保存</el-button><el-form :model="messageForm" :rules="messa
·
开发的时候,form表单的提交按钮不一定在form内,那么要实现当按钮在form表单外也要触发校验的功能。直接贴代码如下
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>
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;
}
});
}
}
}
}
点击保存按钮触发表单验证
更多推荐
已为社区贡献9条内容
所有评论(0)