基于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-z\d]{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: 'a@b.com' },
    { 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-z\d]{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 '';
}