平时做技术实践时，很多问题不是概念不会，而是细节没串起来。拿“基于HarmonyOS的表单与校验功能(输入验证与正则表达式)”来说，它看着像小点，放到项目里常会牵出环境、配置、兼容性和维护成本。下面按实际采用顺序，把思路、关键写法和容易踩坑的地方讲清楚，便于大家直接对照操作。

目录

• 一、引言
• 二、表单组件概览
• 2.1 输入类组件
• 2.2 选择类组件
• 2.3 按钮类组件
• 三、TextInput 详解
• 3.1 基本用法
• 3.2 输入类型
• 3.3 其他常用属性
• 四、正则表达式校验
• 4.1 什么是正则表达式
• 4.2 常用正则模式
• 4.3 常用校验正则
• 五、实战代码：表单校验页面
• 5.1 定义数据结构
• 5.2 组件状态定义
• 5.3 校验方法
• 5.4 提交方法
• 5.5 表单字段构建器
• 5.6 构建 UI
• 六、表单校验最佳实践
• 6.1 实时校验 vs 提交校验
• 6.2 校验反馈设计
• 6.3 正则表达式测试
• 6.4 空值校验
• 七、常用问题
• 7.1 校验不生效
• 7.2 错误提示布局跳动
• 7.3 密码输入显示明文
• 八、总结

一、引言

结合项目来看，表单是应用收集用户信息的主要方式。无论是登录注册、个人信息填写、搜索筛选，还是设置设置，都离不开表单组件。而表单的核心挑战是数据校验——如何确保用户输入的数据格式正确、内容合法。

从实现思路看，HarmonyOS ArkUI 提供了丰富的表单组件（TextInput、TextArea、Checkbox、Radio、Switch 等），结合正则表达式能够完成强大的数据校验能力。本文将以一个清爽蓝白风格的表单页面为主线，深入讲解表单开发与数据校验的核心技能。

二、表单组件概览

2.1 输入类组件

2.2 选择类组件

2.3 按钮类组件

三、TextInput 详解

3.1 基本用法

TextInput({ placeholder: '请输入用户名', text: this.username })
  .width('100%')
  .height(46)
  .onChange((v: string) => {
    this.username = v;
  })

代码说明：

• TextInput 构造参数：placeholder 占位提示，text 绑定当前值。
• .onChange 回调：输入内容变化时触发，参数是当前输入值。

3.2 输入类型

TextInput({ placeholder: '邮箱' })
  .type(InputType.Email)     // 邮箱键盘
TextInput({ placeholder: '手机号' })
  .type(InputType.PhoneNumber) // 数字键盘
TextInput({ placeholder: '密码' })
  .type(InputType.Password)  // 密码输入
TextInput({ placeholder: '数字' })
  .type(InputType.Number)    // 数字键盘

代码说明：

type 属性控制键盘类型和输入限制：

• InputType.Email：邮箱键盘，带 @ 符号。
• InputType.PhoneNumber：数字键盘。
• InputType.Password：密码输入，内容显示。
• InputType.Number：纯数字键盘。

3.3 其他常用属性

TextInput({ placeholder: '输入' })
  .maxLength(20)                    // 最大长度
  .enabled(true)                    // 是否可用
  .showCounter(true)                // 显示字数统计
  .enterKeyType(EnterKeyType.Done)  // 回车键类型
  .onSubmit(() => {                 // 提交回调
    console.info('提交');
  })

四、正则表达式校验

4.1 什么是正则表达式

落到代码里，正则表达式（Regular Expression）是一种描述字符串匹配模式的工具。它用特殊的语法定义"什么样的字符串是合法的"，随后用来校验、搜索、替换文本。

4.2 常用正则模式

4.3 常用校验正则

// 用户名：3-12 位字母/数字/下划线
const usernameRegex = /^[a-zA-Z0-9_]{3,12}$/;
// 邮箱
const emailRegex = /^[w.-]+@[w-]+(.[w-]+)+$/;
// 手机号：11 位大陆手机号
const phoneRegex = /^1[3-9]d{9}$/;
// 密码：6-16 位，必须包含字母和数字
const passwordRegex = /^(?=.*[A-Za-z])(?=.*d)[A-Za-zd]{6,16}$/;
// 身分证号
const idCardRegex = /^d{17}[dXx]$/;
// URL
const urlRegex = /^(https?|ftp)://[^s/$.?#].[^s]*$/;

代码说明：

• ^ 和 $ 锚定字符串的开始和结束，确保整个字符串匹配。
• (?=.*[A-Za-z]) 是正向预查，表示"后面必须包含字母"。
• (?=.*d) 表示"后面必须包含数字"。
• 组合采用实现"必须同时包含字母和数字"的复杂校验。

五、实战代码：表单校验页面

理解这一步时，下面我们实现一个完整的表单校验页面，包含用户名、邮箱、手机号、密码四个字段的实时校验。

5.1 定义数据结构

interface RuleRow {
  field: string;
  rule: string;
  example: string;
}

代码说明：

RuleRow 接口描述校验规则表格中的一行数据，包含字段名、规则和示例。

5.2 组件状态定义

@Entry
@Component
struct FormPage {
  @State username: string = '';
  @State email: string = '';
  @State phone: string = '';
  @State password: string = '';
  @State usernameErr: string = '';
  @State emailErr: string = '';
  @State phoneErr: string = '';
  @State passwordErr: string = '';
  @State rules: RuleRow[] = [
    { field: '用户名', rule: '3-12 位字母/数字/下划线', example: 'atom_code' },
    { field: '邮箱', rule: '标准邮箱格式', example: '[email protected]' },
    { field: '手机号', rule: '11 位大陆手机号', example: '13800138000' },
    { field: '密码', rule: '6-16 位含字母和数字', example: 'abc123' }
  ];

代码说明：

• 每个输入字段对应一个值变量和一个错误信息变量。
• 错误信息变量用来显示校验失败的原因，初始为空字符串表示无错误。
• rules 数组存储校验规则表格数据。

5.3 校验方法

validateUsername(v: string): void {
  this.username = v;
  this.usernameErr = /^[a-zA-Z0-9_]{3,12}$/.test(v) ? '' : '用户名需 3-12 位字母/数字/下划线';
}
validateEmail(v: string): void {
  this.email = v;
  this.emailErr = /^[w.-]+@[w-]+(.[w-]+)+$/.test(v) ? '' : '邮箱格式不正确';
}
validatePhone(v: string): void {
  this.phone = v;
  this.phoneErr = /^1[3-9]d{9}$/.test(v) ? '' : '手机号格式不正确';
}
validatePassword(v: string): void {
  this.password = v;
  this.passwordErr = /^(?=.*[A-Za-z])(?=.*d)[A-Za-zd]{6,16}$/.test(v) ? '' : '密码需 6-16 位且包含字母和数字';
}

代码说明：

四个校验方法结构一致，核心逻辑是：

• 同步输入值：this.username = v 将输入值保存到状态。
• 正则校验：采用 .test(v) 方法测试输入值是否匹配正则表达式，得到布尔值。
• 三元表达式：匹配成功则错误信息为空，失败则设置错误提示文字。
• 实时校验：这些方法在 onChange 回调中调用，实现输入即校验的实时反馈。

5.4 提交方法

submit(): void {
  this.validateUsername(this.username);
  this.validateEmail(this.email);
  this.validatePhone(this.phone);
  this.validatePassword(this.password);
  const ok = !this.usernameErr && !this.emailErr && !this.phoneErr && !this.passwordErr;
  if (ok) {
    promptAction.showToast({ message: '✓ 校验通过，提交成功' });
  } else {
    promptAction.showToast({ message: '✗ 存在校验错误，请检查' });
  }
}

代码说明：

submit 方法在点击提交按钮时执行：

• 重新校验：对所有字段重新执行校验，确保最新状态。
• 综合判断：所有错误信息都为空才表示校验借助。
• 结果反馈：借助 Toast 提示校验结果。

5.5 表单字段构建器

@Builder
FormField(label: string, placeholder: string, value: string, error: string, onInput: (v: string) => void) {
  Column({ space: 6 }) {
    Text(label)
      .fontSize(13)
      .fontWeight(FontWeight.Medium)
      .fontColor('#2F3542')
      .alignSelf(ItemAlign.Start)
    TextInput({ placeholder: placeholder, text: value })
      .width('100%')
      .height(46)
      .backgroundColor('#F5F7FA')
      .borderRadius(10)
      .placeholderColor('#A0A8B4')
      .border({ width: 1, color: error ? '#FF4757' : '#E1E6ED' })
      .onChange((v: string) => { onInput(v); })
    Text(error)
      .fontSize(11)
      .fontColor('#FF4757')
      .alignSelf(ItemAlign.Start)
      .height(16)
  }
  .width('100%')
  .alignItems(HorizontalAlign.Start)
}

代码说明：

FormField 是表单字段的通用构建器，借助参数化实现复用：

• 参数设计：
  • label：字段标签。
  • placeholder：输入占位提示。
  • value：当前输入值。
  • error：错误信息。
  • onInput：输入回调函数（作为参数传入）。
• 错误状态样式：.border({ width: 1, color: error ? '#FF4757' : '#E1E6ED' }) 根据是否有错误切换边框颜色，有错误显示红色边框。
• 错误提示：Text(error) 显示错误信息，.height(16) 固定高度，即使无错误也占位，避免布局跳动。
• 回调传递：onInput 参数是函数类型，在 onChange 中调用，实现了构建器的通用性。

5.6 构建 UI

build() {
  Scroll() {
    Column({ space: 16 }) {
      // 顶部标题
      Column() {
        Text('FORM')
          .fontSize(12)
          .fontColor('#B3D4FF')
          .letterSpacing(8)
        Text('表单与校验')
          .fontSize(26)
          .fontWeight(FontWeight.Bold)
          .fontColor(Color.White)
          .margin({ top: 6 })
        Text('正则表达式 · 实时校验')
          .fontSize(12)
          .fontColor('#B3D4FF')
          .margin({ top: 6 })
      }
      .width('100%')
      .padding({ top: 48, bottom: 30 })
      .backgroundColor('#3B82F6')
      // 表单区
      Column({ space: 4 }) {
        this.FormField('用户名', '请输入用户名', this.username, this.usernameErr, (v: string) => { this.validateUsername(v); })
        this.FormField('邮箱', '请输入邮箱', this.email, this.emailErr, (v: string) => { this.validateEmail(v); })
        this.FormField('手机号', '请输入手机号', this.phone, this.phoneErr, (v: string) => { this.validatePhone(v); })
        this.FormField('密码', '请输入密码', this.password, this.passwordErr, (v: string) => { this.validatePassword(v); })
      }
      .width('100%')
      .padding(20)
      .backgroundColor(Color.White)
      .borderRadius(16)
      .shadow({ radius: 8, color: '#22000000', offsetY: 4 })
      // 大号提交按钮
      Button('提交表单')
        .width('100%')
        .height(52)
        .fontSize(17)
        .fontWeight(FontWeight.Bold)
        .fontColor(Color.White)
        .linearGradient({
          angle: 90,
          colors: [['#3B82F6', 0], ['#6366F1', 1]]
        })
        .borderRadius(26)
        .shadow({ radius: 14, color: '#553B82F6', offsetY: 4 })
        .onClick(() => { this.submit(); })

代码说明：

表单区借助 FormField 构建器生成四个字段，每个字段传入对应的状态、错误信息和校验回调。提交按钮采用蓝紫渐变、大圆角，形成醒目的 CTA（行动召唤）按钮。

      // 校验规则表格
      Column() {
        Text('校验规则速查')
          .fontSize(14)
          .fontWeight(FontWeight.Bold)
          .fontColor('#3B82F6')
          .alignSelf(ItemAlign.Start)
          .margin({ bottom: 8 })
        Row() {
          Text('字段').layoutWeight(1).fontSize(12).fontWeight(FontWeight.Bold).fontColor('#3B82F6')
          Text('规则').layoutWeight(2).fontSize(12).fontWeight(FontWeight.Bold).fontColor('#3B82F6')
          Text('示例').layoutWeight(1).fontSize(12).fontWeight(FontWeight.Bold).fontColor('#3B82F6')
        }
        .width('100%')
        .padding(10)
        .backgroundColor('#EFF6FF')

        ForEach(this.rules, (row: RuleRow) => {
          Row() {
            Text(row.field).layoutWeight(1).fontSize(12).fontColor('#2F3542')
            Text(row.rule).layoutWeight(2).fontSize(11).fontColor('#555555')
            Text(row.example).layoutWeight(1).fontSize(11).fontColor('#3B82F6').fontFamily('monospace')
          }
          .width('100%')
          .padding(10)
          .border({ width: { bottom: 1 }, color: '#EFF6FF' })
        })
      }
      .width('100%')
      .padding(16)
      .backgroundColor('#F8FBFF')
      .borderRadius(14)
      .border({ width: 1, color: '#DCE9FB' })

代码说明：

校验规则速查表是一个带表头的三列表格：

• 表头行包含"字段"、“规则”、"示例"三列，采用浅蓝背景突出。
• 数据行借助 ForEach 渲染，示例列采用蓝色等宽字体。
• 列宽借助 layoutWeight 控制（1:2:1）。

六、表单校验最佳实践

6.1 实时校验 vs 提交校验

• 实时校验：输入时即时反馈，体验好，但可能过早报错。
• 提交校验：提交时统一校验，流程轻松。
• 建议：结合采用，输入时实时校验格式，提交时统一校验必填。

6.2 校验反馈设计

• 错误信息清晰明确，指出具体问题。
• 错误提示位置稳定，避免布局跳动。
• 采用颜色（红色边框、红色文字）强化错误视觉。

6.3 正则表达式测试

正则表达式容易出错，建议先在测试工具中验证，再应用到代码中。

6.4 空值校验

除了格式校验，还要处理必填字段的空值校验：

validateRequired(v: string): string {
  if (!v.trim()) {
    return '该字段不能为空';
  }
  return '';
}

七、常用问题

7.1 校验不生效

原因：正则表达式错误，或 .test() 采用不当。

解决：先在测试工具验证正则，确认 .test() 参数正确。

7.2 错误提示布局跳动

原因：错误信息高度不固定，导致布局变化。

解决：给错误提示设置固定高度（如 .height(16)）。

7.3 密码输入显示明文

原因：没有设置 .type(InputType.Password)。

解决：设置密码输入类型。

八、总结

结合项目来看，本文深入讲解了 HarmonyOS 表单与校验技术，借助一个清爽蓝白风格的表单页面实战演示了输入组件、正则校验、实时反馈和提交处理等核心能力。

核心要点回顾：

1. TextInput 兼容多种输入类型（邮箱、手机号、密码等）。
2. 正则表达式是数据校验的核心工具。
3. 借助 .test() 方法校验输入值。
4. 实时校验在 onChange 中触发，提交时统一验证。
5. 错误反馈采用红色边框和文字强化。
6. 采用 @Builder 参数化表单字段，实现复用。

实际处理时，表单是收集用户信息的关键，掌握校验技术能构建可靠、友好的表单体验。下一篇我们将讲解 HarmonyOS 数据可视化（Canvas 绘图）。

到此这篇关于基于HarmonyOS的表单与校验功能(输入验证与正则表达式)的文章就介绍到这了,更多相关HarmonyOS表单与校验内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多兼容脚本之家！

您可能感兴趣的文章:

• H蒙harmonyOS正则表达式采用笔记
• H蒙HarmonyOS中的ArkUI组件库特性与常用组件实例演示
• HarmonyOS中采用Node-API开发的典型场景示例
• HarmonyOS系统借助AVPlayer开发视频播放功能
• H蒙中@State的原理采用详解(HarmonyOS 5)
• HarmonyOS Next音乐播放器项目实现代码
• H蒙HarmonyOS开发:Navigation路由导航功能和实践
• H蒙(HarmonyOS)实现隐私正策弹窗效果
• HarmonyOS实现Java端类似Nine-Patch气泡聊天框代码