HarmonyOS 鸿蒙Next实现表单页面的输入，必填校验和提交

HarmonyOS 鸿蒙Next实现表单页面的输入，必填校验和提交 一. 样例介绍

本篇 Codelab 基于 input 组件、label 组件和 dialog 组件，实现表单页面的输入、必填校验和提交：

  1. 为 input 组件设置不同类型（如：text，email，date 等），完成表单页面。
  2. 对表单页面中的用户名、电子邮件、爱好输入框进行必填校验。
  3. 使用弹框选择性别、爱好。

相关概念

完整示例

gitee源码地址

二. 环境搭建

我们首先需要完成 HarmonyOS 开发环境搭建，可参照如下步骤进行。

软件要求

硬件要求

  • 设备类型：华为手机或运行在 DevEco Studio 上的华为手机设备模拟器。
  • HarmonyOS 系统：3.1.0 Developer Release 及以上版本。

环境搭建

  1. 安装 DevEco Studio，详情请参考下载和安装软件。
  2. 设置 DevEco Studio 开发环境，DevEco Studio 开发环境需要依赖于网络环境，需要连接上网络才能确保工具的正常使用，可以根据如下两种情况来配置开发环境：
  • 如果可以直接访问 Internet，只需进行下载HarmonyOS SDK操作。
  • 如果网络不能直接访问 Internet，需要通过代理服务器才可以访问，请参考配置开发环境。
  1. 开发者可以参考以下链接，完成设备调试的相关配置：

三. 代码结构解读

本篇 Codelab 只对核心代码进行讲解，对于完整代码，我们会在源码下载或 gitee 中提供。

├──entry/src/main/js
│   └──MainAbility
│       ├──common
│       │   ├──constant
│       │   │   └──commonConstants.js // 公共常量
│       │   └──images // 图片资源目录
│       ├──i18n
│       │   ├──en-US.json // 英文国际化
│       │   └──zh-CN.json // 中文国际化
│       ├──pages
│       │   └──index
│       │       ├──index.css // 表单页面样式
│       │       ├──index.hml // 表单页面
│       │       └──index.js // 表单页面逻辑
│       └──app.js // 程序入口
└──entry/src/main/resource // 应用静态资源目录

四. 页面设计

页面包括用户名、电子邮箱、出生日期、身高、性别、爱好输入框和提交按钮，点击提交按钮进行必填校验。

效果如图所示：

点击性别输入框弹出性别单选框，点击爱好输入框弹出爱好多选框。

五. 后台逻辑处理

用户名、电子邮箱、出生日期、身高输入框中值发生变化时，会在 data 对象中实时更新。

通过自定义弹框选择性别、爱好。在弹框中点击取消按钮关闭当前弹框，点击确定按钮先设置所选值再关闭弹框。

点击提交按钮对表单进行提交前，先对用户名、密码、电子邮件、爱好进行必填校验，再通过正则表达式对出生日期进行“yyyy-mm-dd”格式校验、对身高进行整数或浮点数校验。

总结

您已经完成了本次 Codelab 的学习，并了解到以下知识点：

  1. input 组件的使用。
  2. label 组件的使用。
  3. dialog 组件的使用。

更多关于HarmonyOS 鸿蒙Next实现表单页面的输入，必填校验和提交的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

环境搭建时使用的stage模型，代码是FA模型，你把我这新手看懵了呀，代码依旧有很多值得借鉴的地方，感谢分享

更多关于HarmonyOS 鸿蒙Next实现表单页面的输入，必填校验和提交的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中实现表单页面的输入、必填校验和提交，可以按照以下步骤进行：

  1. 布局设计：使用Component和TextInput等组件构建表单界面。
  2. 数据绑定：通过@State或@Link装饰器绑定输入框的值。
  3. 必填校验：在提交时检查输入框是否为空，若为空则提示用户。
  4. 提交处理：在onClick事件中处理表单提交，调用API或执行其他业务逻辑。

示例代码：

@Entry
@Component
struct FormPage {
  @State name: string = '';
  @State age: string = '';

  build() {
    Column() {
      TextInput({ placeholder: '姓名' }).onChange((value) => { this.name = value; })
      TextInput({ placeholder: '年龄' }).onChange((value) => { this.age = value; })
      Button('提交').onClick(() => {
        if (!this.name || !this.age) {
          AlertDialog.show({ message: '请填写所有必填项' });
        } else {
          // 提交逻辑
        }
      })
    }
  }
}

通过以上步骤，即可实现表单的输入、校验和提交功能。

回到顶部