JavaScript Tip之:用&&和||来模拟if-else

本文介绍如何利用逻辑运算符&&和||在JavaScript中实现类似于if-else的逻辑判断,通过一系列示例展示其应用及原理。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1. &&和||来模拟if-else:

var returnStr = aBoo&&aStr||bBoo&&bStr||cBoo&&cStr||dBoo&&dStr

等同于

var returnStr = “”;
if(aBoo){
  returnStr = aStr;
}else if(bBoo){
  returnStr = bStr;
}else if(cBoo){
  returnStr = cStr;
}else if(dBoo){
  returnStr = dStr;
}

原理:

true&&"abc" --> "abc"; 

!!"abc" --> true; 

false&&"abc" --> false;

<script lang="ts" setup> import { ref, onMounted } from 'vue' import Navigater from '@/components/Navigation/Navigater.vue' import {getTaskDetail} from '@/pages/taskDetail/api/index' import type { UploadFile } from 'element-plus' import { Edit,Delete, Download, Plus, ZoomIn} from '@element-plus/icons-vue' import type { FormInstance, FormRules } from 'element-plus' const route = useRoute() // 正确获取当前 route 实例 const id = ref() const taskDetail = ref()// 任务详情 const partyUserInfo = ref() const checked1 = ref(false) const addTxt1 = ref('') const container = ref(null) let scaleValue = 1 const getData = async (id) => { const res = await getTaskDetail({id:id}) taskDetail.value = res.data partyUserInfo.value = res.data.partyUserInfo console.log(partyUserInfo.value.avatar)//输出结果https://cdn.shenyantuling.com/prod/image/head/shutiao1.png } // 图片上传 const dialogImageUrl = ref('') const dialogVisible = ref(false) const disabled = ref(false) const handleRemove = (file: UploadFile) => { console.log(file) } const handlePictureCardPreview = (file: UploadFile) => { dialogImageUrl.value = file.url! dialogVisible.value = true } const handleDownload = (file: UploadFile) => { console.log(file) } // 表单校验 const ruleFormRef = ref<FormInstance>() const ruleForm = reactive({ // .... }) const handleResize = () => { const containerWidth = container.value.offsetWidth const containerHeight = container.value.offsetHeight const windowWidth = window.innerWidth const windowHeight = window.innerHeight // 计算缩放比例,保持内容完整显示 scaleValue = Math.min( windowWidth / containerWidth, windowHeight / containerHeight ) container.value.style.transform = `scale(${scaleValue})` container.value.style.transformOrigin = 'top left' } onMounted(() => { handleResize() window.addEventListener('resize', handleResize) id.value = route.query.id getData(id.value) }) onBeforeUnmount(() => { window.removeEventListener('resize', handleResize) }) </script> <template> <div class="scale-container" ref="container"> <div class="content"> <!-- 顶部 logo 导航栏 --> <Navigater class="top"></Navigater> <!-- 任务详情 --> <div class="wrap"> <div class="topBack"> <div class="return"> <img src="@/assets/navigater/return.png" alt=""> </div> <div class="title">任务详情</div> </div> <div class="taskBox"> <div class="taskLeft"> <!-- 发布者 --> <div class="publisherBox"> <div class="avatar"> <img :src=partyUserInfo.avatar alt=""> </div> <div class="info"> <div class="infoTop"> <div class="name">avatar</div> <img src="@/assets/navigater/task1.png" alt=""> <img src="@/assets/navigater/task1.png" alt=""> </div> <div class="dic"> The First Onchain Treasury Network for Web 3The First Onchain Treasury Network for Web 3The First Onchain Treasury Network for Web 3 </div> </div> </div> <!-- 任务 --> <div class="taskDic"> <div class="taskImg"> <img src="@/assets/navigater/task1.png" alt=""> </div> <div class="taskText"> <div class="taskTitle">任务标题:关注微博账号赠送3000积分积分赠送</div> <div class="botBox"> <div class="type">任务类型</div> <div class="copy"> <img src="@/assets/navigater/task2.png" alt=""> </div> </div> </div> </div> <div class="tip"> <img src="@/assets/navigater/task1.png" alt=""> <div class="tipTxt">Joinly 将在发放奖励前仔细检查,已提交的任务</div> </div> <div class="taskMain"> <div class="mainTop"> <img src="@/assets/navigater/task2.png" alt=""> <div class="mainTxt">关注 crazy crap在微博的账号,账号名称crazy crap</div> </div> <div class="main"> <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" status-icon label-width="auto" class="demo-ruleForm" > <!-- :rules="rules" --> <el-card class="step"> <div class="stepTop"> <div class="stepTit"> <el-checkbox v-model="checked1" size="large" /> <div class="stepTxt">关闭微博关闭微博关闭微博关闭微博关闭微博关闭微博关闭微博关闭微博关闭微博关闭微博</div> </div> <el-button class="stepBtn" color="#715EFF" type="primary" :icon="Edit" disabled>保存修改</el-button> </div> <div class="stepMain"> <div class="title">添加图片</div> <el-upload action="#" list-type="picture-card" :auto-upload="false" :limit=3> <el-icon><Plus /></el-icon> <template #file="{ file }"> <div> <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" /> <span class="el-upload-list__item-actions"> <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)" > <el-icon><zoom-in /></el-icon> </span> <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)" > <el-icon><Delete /></el-icon> </span> </span> </div> </template> </el-upload> <el-dialog v-model="dialogVisible"> <img w-full :src="dialogImageUrl" alt="Preview Image" /> </el-dialog> <div class="title">添加文字</div> <el-input class="addTxt" type="textarea" v-model="addTxt1" placeholder="请输入文字" /> </div> </el-card> <el-card class="step"> <div class="stepTop"> <div class="stepTit"> <el-checkbox v-model="checked1" size="large" /> <div class="stepTxt">关闭微博关闭微博关闭微博关闭微博关闭微博关闭微博关闭微博关闭微博关闭微博关闭微博</div> </div> <el-button class="stepBtn" color="#715EFF" type="primary" :icon="Edit" disabled>保存修改</el-button> </div> <div class="stepMain"> <div class="title">添加图片</div> <el-upload action="#" list-type="picture-card" :auto-upload="false" :limit=3> <el-icon><Plus /></el-icon> <template #file="{ file }"> <div> <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" /> <span class="el-upload-list__item-actions"> <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)" > <el-icon><zoom-in /></el-icon> </span> <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)" > <el-icon><Delete /></el-icon> </span> </span> </div> </template> </el-upload> <el-dialog v-model="dialogVisible"> <img w-full :src="dialogImageUrl" alt="Preview Image" /> </el-dialog> <div class="title">添加文字</div> <el-input class="addTxt" type="textarea" v-model="addTxt1" placeholder="请输入文字" /> </div> </el-card> <el-card class="step"> <div class="stepTop"> <div class="stepTit"> <el-checkbox v-model="checked1" size="large" /> <div class="stepTxt">关闭微博关闭微博关闭微博关闭微博关闭微博关闭微博关闭微博关闭微博关闭微博关闭微博</div> </div> <el-button class="stepBtn" color="#715EFF" type="primary" :icon="Edit" disabled>保存修改</el-button> </div> <div class="stepMain"> <div class="title">添加图片</div> <el-upload action="#" list-type="picture-card" :auto-upload="false" :limit=3> <el-icon><Plus /></el-icon> <template #file="{ file }"> <div> <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" /> <span class="el-upload-list__item-actions"> <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)" > <el-icon><zoom-in /></el-icon> </span> <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)" > <el-icon><Delete /></el-icon> </span> </span> </div> </template> </el-upload> <el-dialog v-model="dialogVisible"> <img w-full :src="dialogImageUrl" alt="Preview Image" /> </el-dialog> <div class="title">添加文字</div> <el-input class="addTxt" type="textarea" v-model="addTxt1" placeholder="请输入文字" /> </div> </el-card> </el-form> </div> </div> </div> <div class="taskRight"> </div> </div> </div> </div> </div> </template> <style scoped lang="scss"> .scale-container { width: 1920px; /* 设计稿宽度 */ position: absolute; display: block; top: 0; left: 0; .content { width: 100%; height: 100%; background-color: #000; display: block; .wrap{ width: 1552px; margin: 0 auto; .topBack{ display: flex; width: 1552px; height: 74px; justify-content: left; align-items: center; border-bottom: 1px solid #444; margin-bottom: 31px; .return{ width: 24px; height: 24px; margin-right: 10px; img{ width: 100%; height: 100%; } } .title{ font-family: PingFang SC; font-weight: 600; font-style: Semibold; font-size: 20px; color:#fff; line-height: 100%; letter-spacing: -0.3px; } } .taskBox{ display: flex; width: 1174px; margin: 0 auto; .taskLeft{ width: 787px; .publisherBox{ width: 787px; height:100px; display: flex; background-color: #232323; border-radius: 12px; padding: 16px; margin-bottom: 30px; .avatar{ width: 48px; height: 48px; margin-right: 16px; img{ width: 100%; height: 100%; border-radius: 50%; } } .info{ .infoTop{ display: flex; justify-content: left; align-items: center; .name{ font-family: PingFang SC; font-weight: 600; font-style: Semibold; font-size: 20px; color:#fff; line-height: 100%; letter-spacing: -0.3px; } img{ width: 16px; height: 16px; border-radius: 50%; margin-left: 8px; } } .dic{ width: 536px; margin-top: 14px; font-family: PingFang SC; font-weight: 400; font-style: Regular; font-size: 14px; line-height: 21px; letter-spacing: -0.3px; color:#A6A6A6; display: -webkit-box; /* 关键属性:弹性伸缩盒子 */ -webkit-box-orient: vertical; /* 排列方向:垂直 */ -webkit-line-clamp: 2; /* 限制行数:2行 */ overflow: hidden; /* 溢出隐藏 */ text-overflow: ellipsis; /* 溢出显示省略号 */ word-break: break-word; /* 长单词换行处理 */ } } } .taskDic{ width: 786px; height: 150px; top: 346px; left: 373px; display: flex; padding-top: 32px; border-top: 1px solid #444; .taskImg{ img{ width: 160px; height: 120PX; border-radius: 12px; } } .taskText{ color: #fff; margin-left: 23px; .taskTitle{ width: 546px; height: 80px; font-family: PingFang SC; font-weight: 600; font-style: Semibold; font-size: 26px; letter-spacing: -0.3px; // display: -webkit-box; /* 关键属性:弹性伸缩盒子 */ // -webkit-box-orient: vertical; /* 排列方向:垂直 */ // -webkit-line-clamp: 2; /* 限制行数:2行 */ // overflow: hidden; /* 溢出隐藏 */ // text-overflow: ellipsis; /* 溢出显示省略号 */ // word-break: break-word; /* 长单词换行处理 */ } .botBox{ display: flex; justify-content: space-between; align-items: center; width: 603px; .type{ width: 64px; height: 30px; text-align: center; font-family: PingFang SC; font-weight: 600; font-style: Semibold; font-size: 12px; line-height: 30px; letter-spacing: -0.3px; border-radius: 4px; background-color: #232323; } .copy{ width: 30px; height: 30px; img{ width: 100%; height: 100%; } } } } } .tip{ display: flex; justify-content: left; align-items: center; margin: 32px auto; img{ width: 16px; height: 16px; border-radius: 50%; margin-right: 10px; } .tipTxt{ color:#fff;font-family: PingFang SC; font-weight: 400; font-style: Regular; font-size: 14px; line-height: 100%; letter-spacing: -0.3px; } } .taskMain{ width: 787px; padding: 24px; border-radius: 12px; background-color: #232323; .mainTop{ display: flex; justify-content: left; align-items: center; margin-bottom: 23px; img{ width: 24px; height: 24px; border-radius: 4px; margin-right: 10px; } .mainTxt{ font-family: PingFang SC; font-weight: 600; font-style: Semibold; font-size: 18px; color:#fff; line-height: 100%; letter-spacing: -0.3px; } } .main{ .step{ width: 739px; background-color: #121212; border: 1px solid #121212; .stepTop{ width: 715px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #444; .stepTit{ display: flex; justify-content: space-between; align-items: center; .stepTxt{ font-family: PingFang SC; font-weight: 400; font-style: Regular; font-size: 14px; color:#A6A6A6; line-height: 100%; letter-spacing: -0.3px; margin-left: 10px; } } .stepBtn{ margin-right: 10px; margin-bottom: 3px; } } .stepMain{ width: 667px; margin: 0 auto; .title{ font-family: PingFang SC; font-weight: 400; font-style: Regular; font-size: 12px; color:#fff; letter-spacing: -0.3px; margin: 10px 0; } .addTxt{ &:deep(.el-input){ display: block; width: 667px; height: 80px !important; background-color: #363636 !important; border: none; border-radius: 8px; } } } } } } } .taskRight{ width: 339px; margin-left: 48px; } } } } } </style> 中console.log(partyUserInfo.value.avatar)的输出结果为https://cdn.shenyantuling.com/prod/image/head/shutiao1.png。 但是 报错显示:taskDetail.vue:98 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'avatar') at Proxy._sfc_render (taskDetail.vue:98:53) 即<img :src=partyUserInfo.avatar alt="">中找不到avatar
07-29
<template> <myModal :params="{title: $t('选择报警类型')}" :modalWidthSize="'middle'" :visible="visible" @submit="handleOk" @cancel="handleCancel"> <template v-slot:header><span></span></template> <template v-slot:body> <div class="alarm_type_modal"> <div class="main_content" v-if="alarmTypeList.length"> <div class="search_item"> <a-input-search @search="handleAlarmTypeSearch" :placeholder="$t('请输入报警类型名称')" /> </div> <template v-if="isShowList"> <div class="check_item"> <div class="all_check"> <a-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="onCheckAllChange"> {{ $t("用电告警")}} </a-checkbox> <img class="down" @click="changeIcon" :class="{'up': expanded}" src="~@/assets/img/down.png" /> </div> <div :class="['check_group_list', expanded ? 'checkboxUp': 'checkboxDown' ]"> <a-checkbox-group v-model="checkedList" @change="onCheckChange"> <template v-for="el in alarmTypeList"> <a-checkbox v-if="el.show" :key="el.alarmTypeCode" :value="el.alarmTypeCode"> {{el.alarmTypeName}} </a-checkbox> </template> </a-checkbox-group> </div> </div> </template> <noData v-else /> </div> <a-space :size="64" v-else> <a-spin tip="加载中,请稍候..." /> </a-space> </div> </template> </myModal> </template> <script> import noData from '@/components/tableNoData' import myModal from "@/components/scfComponents/modalComponents/modal.vue"; export default { components: { noData, myModal }, data() { return { visible: false, isShowList: true, indeterminate: false, checkAll: false, expanded: true, checkedList: [], alarmTypeList: [] } }, methods: { getAlarmTypeList() { this.alarmTypeList = [{ "alarmTypeCode": 1001, "alarmTypeName": "电流过高预警" }, { "alarmTypeCode": 1002, "alarmTypeName": "温度过高预警" }, { "alarmTypeCode": 1005, "alarmTypeName": "电压过高预警" }, { "alarmTypeCode": 1006, "alarmTypeName": "电压过低预警" }, { "alarmTypeCode": 1007, "alarmTypeName": "功率过载预警" }, { "alarmTypeCode": 1008, "alarmTypeName": "功率过载报警" },] this.alarmTypeList.forEach(item => { item.show = true }) console.log(this.alarmTypeList); }, // 打开弹窗 showModal() { this.visible = true this.getAlarmTypeList() }, // 报警类型搜索 handleAlarmTypeSearch(val) { if (val) { this.alarmTypeList.forEach(item => { console.log(item.alarmTypeName.indexOf(val) > -1); if (item.alarmTypeName.indexOf(val) == -1) { item.show = false } }) } else { this.alarmTypeList.forEach(item => { item.show = true }) } this.$forceUpdate() }, // 全选 onCheckAllChange(e) { let checkCodes = this.alarmTypeList.map(item => item.alarmTypeCode) Object.assign(this, { checkedList: e.target.checked ? checkCodes : [], indeterminate: false, checkAll: e.target.checked, }); }, changeIcon() { this.expanded = !this.expanded }, // 单选 onCheckChange(checkedList) { this.indeterminate = !!checkedList.length && checkedList.length < this.alarmTypeList.length; this.checkAll = checkedList.length === this.alarmTypeList.length; }, // 确定 handleOk() { this.visible = false }, // 取消 handleCancel() { this.visible = false } }, } </script> <style lang="less" scoped> .alarm_type_modal { width: 100%; display: flex; padding: 24px; box-sizing: border-box; justify-content: center; .main_content { width: 100%; min-height: 400px; position: relative; border-radius: 8px; border: solid 1px #c5cdd6; padding: 23px 10px 10px 16px; .search_item { width: 100%; margin-bottom: 15px; } .check_item { border-radius: 4px; margin-bottom: 10px; border: 1px solid var(--split); .all_check { display: flex; padding: 10px 16px; align-items: center; justify-content: space-between; background-color: #f0f3f7; .down { width: 13px; height: 8px; transition: all 0.5s; cursor: pointer; } .up { transform: rotate(180deg); } } .check_group_list { width: 100%; overflow: hidden; transition: all 1s; .ant-checkbox-group { width: 100%; padding: 8px 0 8px 14px; .ant-checkbox-wrapper { margin: 0; width: 25%; padding: 4px; overflow: hidden; line-height: 28px; padding-left: 18px; white-space: nowrap; text-overflow: ellipsis; border-right: 1px solid #f0f3f7; &:nth-child(4n) { border-right: none; } } } } .checkboxDown { height: 0px; } .checkboxUp { min-height: 30px; } } } } </style> 代码评审
最新发布
08-14
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>收费项目明细添加</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.6.8/css/layui.css"> <style> body { background-color: #f2f3f5; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } .x-body { padding: 20px; background-color: #fff; border-radius: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); margin: 20px auto; max-width: 800px; } .form-header { font-size: 18px; font-weight: bold; padding-bottom: 15px; margin-bottom: 20px; border-bottom: 1px solid #eee; color: #333; } .x-red { color: #ff5722; } .layui-form-label { width: 120px; font-weight: 500; } .layui-input-block { margin-left: 150px; } .submit-btn { margin-top: 30px; text-align: center; } .error-tip { color: #ff5722; font-size: 12px; margin-top: 5px; display: none; } .has-error .error-tip { display: block; } .loading-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.7); z-index: 9999; display: flex; align-items: center; justify-content: center; } </style> </head> <body> <div id="app"> <div class="x-body"> <div class="form-header">收费项目明细添加</div> <form class="layui-form layui-form-pane"> <input type="hidden" name="id" v-model="formData.id"> <!-- 所属小区(改为文本框) --> <div class="layui-form-item" :class="{'has-error': errors.community_name}"> <label class="layui-form-label"> <span class='x-red'>*</span>所属小区 </label> <div class="layui-input-block"> <!-- 关键修改1:select改为input --> <input type="text" v-model="formData.community_name" class="layui-input" placeholder="请输入所属小区名称" lay-verify="required"> <div class="error-tip" v-if="errors.community_name">{{ errors.community_name }}</div> </div> </div> <!-- 收费项目(改为文本框) --> <div class="layui-form-item" :class="{'has-error': errors.project_name}"> <label class="layui-form-label"> <span class='x-red'>*</span>收费项目 </label> <div class="layui-input-block"> <!-- 关键修改2:select改为input --> <input type="text" v-model="formData.project_name" class="layui-input" placeholder="请输入收费项目名称" lay-verify="required"> <div class="error-tip" v-if="errors.project_name">{{ errors.project_name }}</div> </div> </div> <!-- 业主(改为文本框) --> <div class="layui-form-item" :class="{'has-error': errors.owner_name}"> <label class="layui-form-label"> <span class='x-red'>*</span>业主 </label> <div class="layui-input-block"> <!-- 关键修改3:select改为input --> <input type="text" v-model="formData.owner_name" class="layui-input" placeholder="请输入业主姓名" lay-verify="required"> <div class="error-tip" v-if="errors.owner_name">{{ errors.owner_name }}</div> </div> </div> <!-- 应收金额 --> <div class="layui-form-item" :class="{'has-error': errors.yf_money}"> <label class="layui-form-label"> <span class='x-red'>*</span>应收金额(¥) </label> <div class="layui-input-block"> <input type="number" v-model="formData.yf_money" autocomplete="off" placeholder="请输入应收金额" class="layui-input" @input="validateMoney('yf_money')"> <div class="error-tip" v-if="errors.yf_money">{{ errors.yf_money }}</div> </div> </div> <!-- 实收金额 --> <div class="layui-form-item" :class="{'has-error': errors.ss_money}"> <label class="layui-form-label"> <span class='x-red'>*</span>实收金额(¥) </label> <div class="layui-input-block"> <input type="number" v-model="formData.ss_money" autocomplete="off" placeholder="请输入实收金额" class="layui-input" @input="validateMoney('ss_money')"> <div class="error-tip" v-if="errors.ss_money">{{ errors.ss_money }}</div> </div> </div> <!-- 缴费日期 --> <div class="layui-form-item" :class="{'has-error': errors.jf_time}"> <label class="layui-form-label"> <span class='x-red'>*</span>缴费日期 </label> <div class="layui-input-inline"> <input class="layui-input" v-model="formData.jf_time" placeholder="点击选择日期" id="paymentDate" readonly> </div> <div class="error-tip" v-if="errors.jf_time">{{ errors.jf_time }}</div> </div> <!-- 备注 --> <div class="layui-form-item"> <label class="layui-form-label"> <span class='x-red'>*</span>备注 </label> <div class="layui-input-block"> <textarea placeholder="请输入备注内容" v-model="formData.desc" class="layui-textarea"></textarea> </div> </div> <!-- 提交按钮 --> <div class="layui-form-item submit-btn"> <button class="layui-btn layui-btn-normal" type="button" @click="submitForm"> 保存 </button> <button class="layui-btn layui-btn-primary" type="button" @click="resetForm"> 重置 </button> </div> </form> </div> <!-- 加载中提示 --> <div class="loading-overlay" v-if="loading"> <div class="layui-anim layui-anim-rotate layui-anim-loop"> <i class="layui-icon layui-icon-loading" style="font-size: 40px; color: #1E9FFF;"></i> </div> <div style="margin-top: 10px; color: #666;">提交中,请稍候...</div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <script src="https://www.layuicdn.com/layui-v2.6.8/layui.js"></script> <script> new Vue({ el: '#app', data: { formData: { id: '', community_name: '', // 关键修改4:字段名从community_id改为community_name project_name: '', // 关键修改5:字段名从project_id改为project_name owner_name: '', // 关键修改6:字段名从personnel_id改为owner_name yf_money: '', ss_money: '', jf_time: '', desc: '' }, errors: { community_name: '', // 关键修改7:错误字段名同步调整 project_name: '', owner_name: '', yf_money: '', ss_money: '', jf_time: '' }, loading: false, laydate: null }, mounted() { layui.use(['laydate', 'form'], () => { this.laydate = layui.laydate; layui.form.render(); this.initDatePicker(); }); }, methods: { initDatePicker() { this.laydate.render({ elem: '#paymentDate', type: 'date', value: this.formData.jf_time || new Date(), min: '2010-01-01', max: '2099-12-31', done: (value) => { this.formData.jf_time = value; this.validateField('jf_time'); } }); }, validateMoney(field) { const value = this.formData[field]; if (!value) { this.errors[field] = '金额不能为空'; } else if (isNaN(value) || parseFloat(value) <= 0) { this.errors[field] = '请输入有效的金额'; } else { this.errors[field] = ''; } }, validateField(field) { switch(field) { // 关键修改8:验证字段名同步调整 case 'community_name': this.errors.community_name = this.formData.community_name ? '' : '请输入所属小区'; break; case 'project_name': this.errors.project_name = this.formData.project_name ? '' : '请输入收费项目'; break; case 'owner_name': this.errors.owner_name = this.formData.owner_name ? '' : '请输入业主'; break; case 'yf_money': this.validateMoney('yf_money'); break; case 'ss_money': this.validateMoney('ss_money'); break; case 'jf_time': this.errors.jf_time = this.formData.jf_time ? '' : '请选择缴费日期'; break; } }, validateForm() { // 关键修改9:验证字段名同步调整 this.validateField('community_name'); this.validateField('project_name'); this.validateField('owner_name'); this.validateField('yf_money'); this.validateField('ss_money'); this.validateField('jf_time'); // 检查是否有错误 for (let key in this.errors) { if (this.errors[key]) return false; } // 验证实收金额不小于应收金额 if (parseFloat(this.formData.ss_money) < parseFloat(this.formData.yf_money)) { this.errors.ss_money = '实收金额不能小于应收金额'; return false; } return true; }, submitForm() { if (!this.validateForm()) { layui.layer.msg('请正确填写表单', {icon: 5}); return; } this.loading = true; // 模拟AJAX提交 setTimeout(() => { this.loading = false; // 模拟成功响应(这里保存的是文本输入值) layui.layer.msg('添加成功', {icon: 1, time: 1500}, () => { if (window.parent && window.parent.layer) { const index = parent.layer.getFrameIndex(window.name); parent.layer.close(index); parent.location.reload(); } this.resetForm(); }); }, 1500); }, resetForm() { this.formData = { id: '', community_name: '', project_name: '', owner_name: '', yf_money: '', ss_money: '', jf_time: '', desc: '' }; for (let key in this.errors) { this.errors[key] = ''; } this.initDatePicker(); } } }); </script> </body> </html> 删除备注
07-04
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值