基于HarmonyOS的表单与校验功能(输入验证与正则表达式)实用指南

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

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

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

// 用户名：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]*$/;

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

@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' }
  ];

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 位且包含字母和数字';
}

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: '✗ 存在校验错误，请检查' });
  }
}

@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)
}

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(); })

      // 校验规则表格
      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' })

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