有一段el-form,内有三个el-input,class分别为class1,class2,class3,要求当任一el-input中有未输入的情况时,提示用户输入
时间: 2023-05-21 19:04:20 浏览: 137
输入提示
3星 · 编辑精心推荐
您可以在el-form中加入如下代码:
<el-form :model="form">
<el-input v-model="form.class1" :placeholder="'请输入class1'" />
<el-input v-model="form.class2" :placeholder="'请输入class2'" />
<el-input v-model="form.class3" :placeholder="'请输入class3'" />
<el-button style="margin-top: 10px;" @click="submitForm">提交</el-button>
</el-form>
在script中定义data和submitForm函数,如下:
data() {
return {
form: {
class1: '',
class2: '',
class3: ''
}
}
},
methods: {
submitForm() {
if (this.form.class1 === '' || this.form.class2 === '' || this.form.class3 === '') {
this.$message.error('请完整填写信息');
return;
}
// TODO:进行表单提交
}
}
当用户点击提交按钮后,会判断三个输入框是否全部填写,如果有未填写的则通过$message进行提示。如果全部填写,则可以进行表单提交。
阅读全文