您的位置:首页 > 健康 > 美食 > 个人网站建设总结_公司如何建站_seoaoo_美食软文300字

个人网站建设总结_公司如何建站_seoaoo_美食软文300字

2024/12/23 15:21:12 来源:https://blog.csdn.net/SSHLY3/article/details/144431597  浏览:    关键词:个人网站建设总结_公司如何建站_seoaoo_美食软文300字
个人网站建设总结_公司如何建站_seoaoo_美食软文300字

今天犯了个低级错误,虽然走了很多弯路,但这个过程还是值得记录一下

例子如下,有两个输入框:

第一个是套餐选择下拉框,可以下拉选择三个内容

第二个要根据上面的套餐选择三个选项来决定怎么显示,使用v-if(第一个下拉框的值来做条件显示)

(1)如果套餐选择招牌冰淇淋,第二个输入框就是招牌冰淇淋下拉框,

就以下拉框的形式显示口味

(2)如果套餐选择小吃,第二个输入框就是小吃输入框,

就让客户自己填写什么小吃

(2)如果套餐选择冷饮,第二个输入框就是冷饮输入框,

就让客户自己填写什么冷饮

然后无论第一个套餐选择选哪个选项,都要对第二个框进行非空、长度规则等校验,剩下的两个没选的就不做校验,这里其实v-if取了第一个下拉框的值来对第二个输入框做条件显示的时候,另外两个就不会显示,即不走rules,但我没把第二个输入框的规则写在rules里面,自己做了一个验证规则

具体逻辑就是在确定按钮提交表单时,调取this.validateForm()方法去校验一下第一下选的是哪个选项,再决定去校验后面的哪个输入框

核心校验代码: 

 

详细代码: 

<!--第一个下拉框-->
<el-form-item label="套餐选择" prop="setMealType"><el-select v-model="form.setMealType" placeholder="请选择变更类型" size="small" clearable><el-option label="招牌冰淇淋" value="1"></el-option><el-option label="小吃" value="2"></el-option><el-option label="冷饮" value="3"></el-option></el-select>
</el-form-item>
<!--        第二个输入框(1号)-->
<el-form-item label="招牌冰淇淋" prop="newVehicleColour" v-if="form.setMealType === '1'"><el-select v-model="form.newVehicleColour" placeholder="请选择冰淇淋口味" filterable clearable size="small"><el-option label="香草冰淇淋" value="1"></el-option><el-option label="牛奶红枣" value="2"></el-option><el-option label="薄荷香芋" value="3"></el-option></el-select><div><span v-if="errors.newVehicleColour" class="err">口味不能为空!</span></div>
</el-form-item><!--        第二个输入框(2号)-->
<el-form-item label="小吃" prop="newMotornumber" v-if="form.setMealType === '2'"><el-input v-model="form.newMotornumber"  placeholder="请输入小吃" maxlength="30" ></el-input><span v-if="errors.newMotornumber" class="err">小吃不能为空!</span>
</el-form-item><!--        第二个输入框(3号)-->
<el-form-item label="冷饮" prop="newBatteryNum" v-else-if="form.setMealType === '3'"><el-input v-model="form.newBatteryNum" placeholder="请输入冷饮" maxlength="30" /><span v-if="errors.newBatteryNum" class="err">冷饮不能为空!</span>
</el-form-item>

 data和rules:(data声明errors , rules仅对第一个输入框校验)

data() {return {// 遮罩层loading: true,//表单参数form: {},// 错误信息errors: {},// 表单校验rules: {changeType: [{required: true,message: "请选择套餐类型",trigger: "blur"}],}};},

表单重置:(将this.errors置空)

 // 表单重置reset() {this.form = {id: null,......createBy: null,createTime: null,updateBy: null,updateTime: null,remark: null};this.errors = {};this.resetForm("form");},

校验规则:

// 自定义校验方法validateField(field) {this.errors[field] = '';if (!this.form[field]) {this.errors[field] = `${field} 不能为空!`;}},// 校验所有字段validateForm() {this.errors = {};if (this.form.changeType === '1') {this.validateField('newVehicleColour');} else if (this.form.changeType === '2') {this.validateField('newMotornumber');} else if (this.form.changeType === '3') {this.validateField('newBatteryNum');}// 检查是否有错误for (const key in this.errors) {if (this.errors[key]) {// this.$message.error(this.errors[key]);return false;}}return true;},

重置按钮:

 /** 重置按钮操作 */resetQuery() {this.errors = {};this.resetForm("queryForm");this.handleQuery();},

表单提交按钮:

 /** 提交按钮 */submitForm() {if (this.validateForm()) {// 表单验证通过console.log('表单验证通过', this.form);this.$refs["form"].validate(valid => {if (valid) {if (this.form.id != null) {update(this.form).then(response => {this.$modal.msgSuccess("修改成功");this.open = false;this.getList();});} else {add(this.form).then(response => {this.$modal.msgSuccess("新增成功");this.open = false;this.getList();});}}});// 这里可以添加提交表单的逻辑} else {// 表单验证失败console.log('规则验证失败', this.errors);}},

自定义提示语样式

<style>.err {color: red;font-size: 12px;
}
</style>

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com