开发的时候,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;
					}
				});
			}
		}
	}
}

点击保存按钮触发表单验证
在这里插入图片描述

Logo

前往低代码交流专区

更多推荐