首页/新闻资讯/正文详情

《微信小程序案例4.1详解:form表单、数据绑定、校验与重置按钮》

发布时间:2026/9/24 9:14:55 来源:云帆数科 栏目:资讯中心
《微信小程序案例4.1详解:form表单、数据绑定、校验与重置按钮》
一、项目背景与需求本案例案例4.1要求使用微信小程序的 form 组件、 input 组件、 button 组件和消息提示框 API设计一个三角形面积计算器。用户输入三角形的三条边长系统根据海伦公式计算并显示三角形面积同时对输入数据进行合法性校验。在基本功能之上还要求增加一个“重置”按钮点击后清空所有输入框中的数值恢复页面初始状态。二、核心技术点与实现过程form 表单组件form 组件是小程序中用于收集用户输入的容器组件。它会自动收集内部所有带 name 属性的表单控件如 input 、 checkbox 、 radio 等的值。通过 bindsubmit 绑定提交事件通过 bindreset 绑定重置事件。在 index.wxml 中用 标签包裹所有表单控件并分别绑定提交和重置事件... 2. input 组件 每个输入框都设置了 name 属性指定该输入框在表单提交时的键名不设置则无法通过 e.detail.value 取到值。同时设置了 typenumber 在真机上会弹出纯数字键盘方便用户输入数字。第一个输入框还设置了 focustrue 页面加载时自动获得输入焦点。 3. 数据绑定与 setData 通过 WXML 中的数据绑定语法 {{visible}} 控制结果区域的显示/隐藏。在 JS 中通过 this.setData() 修改数据驱动视图自动更新这是小程序“数据驱动视图”核心思想的体现。 4. 三角形合法性校验 在计算面积前必须进行两步校验 ● 数据类型校验用 isNaN() 判断输入是否为有效数字防止用户输入文字导致计算异常。 ● 三角形不等式校验任意两边之和必须大于第三边 a b c 且 a c b 且 b c a 否则不构成三角形。 校验失败时通过 wx.showToast 弹出提示信息并清空输入框、隐藏结果区域。 5. 海伦公式计算面积 已知三角形三边 a、b、c先计算半周长 s (a b c) / 2则面积 S √(s(s-a)(s-b)(s-c))。 let s (a b c) / 2; let area Math.sqrt(s * (s - a) * (s - b) * (s - c)); area Math.round(area * 100) / 100; // 保留两位小数 6. 重置按钮的实现 给 button 设置 form-typereset 点击后自动触发 form 组件的 bindreset 事件。在 formReset 回调函数中通过 setData 清空三个输入框的数据并将 visible 设为 false 隐藏面积显示区域实现页面恢复到初始状态。 重置 三、页面最终效果 在微信开发者工具中编译运行后页面顶部显示“三角形面积计算器”标题下方依次为三个输入框边长 a、b、c和两个按钮“计算”和“重置”。输入合法数据如 3、4、5点击“计算”后底部绿色区域显示面积结果 S 6输入不合法数据则弹出 Toast 提示并自动清空点击“重置”按钮后所有输入框被清空结果区域隐藏。在手机真机预览时点击输入框可弹出纯数字键盘。 四、总结与体会 通过本次案例的实践我系统地掌握了小程序表单开发的核心流程 1. 表单定义使用 form 组件包裹表单控件通过 name 属性建立数据键名映射。 2. 事件绑定通过 bindsubmit 和 bindreset 分别处理表单提交和重置逻辑。 3. 数据校验在业务计算前进行数据类型和数学逻辑的双重校验保证程序的健壮性。 4. 数据驱动视图通过 setData 修改数据视图自动响应更新无需手动操作 DOM。 5. 海伦公式的应用将数学知识融入编程实践实现了已知三边求面积的完整功能。 这些表单开发模式在实际项目中非常通用是小程序开发的基础技能也为后续学习自定义组件Component和复杂表单交互打下了坚实基础。

相关推荐

产线报警响成一锅粥?分级告警、自动确认与历史追溯完整实战
产线报警响成一锅粥?分级告警、自动确认与历史追溯完整实战

做工业产线上位机开发的朋友应该都有体会:报警系统做不好,整个运维都跟着遭罪。一条产线几十上百个报警点,传感器故障、PLC通信异常、物料不足、设备过载,大大小小的故障都报警,声光一起响,根本分不清哪个急哪个缓。等冲到现场,发现只是个物料不足的提示级报警,真正的停… · 2026/9/24 9:14:43

“给我最新的说明“是一句需要拆解的指令:Agent 的时效性工程
“给我最新的说明“是一句需要拆解的指令:Agent 的时效性工程

"给我最新的说明"听起来是个简单要求,实际上至少藏着三个未定义变量: 最新到什么时候?(查询时点)在哪个范围适用?(地区、账号类型、套餐、版本)以谁发布的为准&#xff1f… · 2026/9/24 9:14:36

Petoi Quaddle 四足机器人:开源可编程桌面级平台解析
Petoi Quaddle 四足机器人:开源可编程桌面级平台解析

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/24 9:14:24

RobustVideoMatting 完整训练指南:四阶段流水线、数据集构建与评测复现
RobustVideoMatting 完整训练指南:四阶段流水线、数据集构建与评测复现

人工智能深度学习计算机视觉视频处理 【免费下载链接】RobustVideoMatting Robust Video Matting in PyTorch, TensorFlow, TensorFlow.js, ONNX, CoreML! 项目地址: https://gitcode.com/gh_mirrors/ro/RobustVideoMatting 点击查看 免费下载 本文以 RobustVideoM… · 2026/9/25 1:50:14

Cursor Add Model 配置 TaoToken:settings.json 骨架与连通性验证
Cursor Add Model 配置 TaoToken:settings.json 骨架与连通性验证

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/25 1:50:08

MP3的VBR编码如何判断?逐字节解析MPEG帧头与Xing Header完全指南
MP3的VBR编码如何判断?逐字节解析MPEG帧头与Xing Header完全指南

MP3的VBR编码如何判断?逐字节解析MPEG帧头与Xing Header完全指南 【免费下载链接】mp3tag4cj 一个用于读取、创建和修改MP3标签信息的库 项目地址: https://gitcode.com/Cangjie-TPC/mp3tag4cj mp3tag4cj 是一个用仓颉语言编写的 MP3 标签处理库,… · 2026/9/25 1:50:08

单电源运放偏置电路设计:LM358与TL431方案详解
单电源运放偏置电路设计:LM358与TL431方案详解

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/25 1:50:02

边缘端AI算力选型:从场景反推芯片的完整方法论
边缘端AI算力选型:从场景反推芯片的完整方法论

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/25 1:50:02

墨堂设计企业展厅设计专业吗,实力如何
墨堂设计企业展厅设计专业吗,实力如何

苏州市墨堂展览设计有限公司是扎根苏州、聚焦江浙沪市场,专做50-200万预算中型企业展厅的一体化服务商,核心服务新能源、储能、智能制造、装备、芯片半导体、精密制造等技术型工业企业,为客户提供兼顾专业内容策划与落地执行、可赋能商务转化… · 2026/9/25 1:49:56

数值优化(Numerical Optimization)学习系列-03-共轭梯度方法(Conjugate Gradient)
数值优化(Numerical Optimization)学习系列-03-共轭梯度方法(Conjugate Gradient)

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/25 1:00:31

创维E900V22D刷机全攻略:S905L3SB芯片兼容性解析与救砖实战
创维E900V22D刷机全攻略:S905L3SB芯片兼容性解析与救砖实战

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/25 1:00:31

MQTT协议原理与Broker服务器搭建实战:从Mosquitto到EMQX
MQTT协议原理与Broker服务器搭建实战:从Mosquitto到EMQX

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/25 1:00:37

了解更多?预约专属演示

我们的顾问将为您一对一讲解产品与方案

企业微信二维码