HarmonyOS鸿蒙Next中验证有没有单独的模块,比如验证非空,邮箱或者电话之类的功能?

HarmonyOS鸿蒙Next中验证有没有单独的模块,比如验证非空,邮箱或者电话之类的功能? 输入验证有没有单独的模块,比如验证非空,邮箱或者电话之类的功能?

4 回复

开发者你好,参考以下方案:

【解决方案】

  1. 创建一个工具类,将常用的校验规则封装在其中,例如校验邮箱、手机号码、密码长度等。

    class FormValidator {
        // 校验邮箱
        static validateEmail(email: string): boolean {
            const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
            return emailRegex.test(email);
        }
    
        // 校验手机号码
        static validatePhoneNumber(phone: string): boolean {
            const phoneRegex = /^1[3-9]\d{9}$/;
            return phoneRegex.test(phone);
        }
    
        // 校验密码长度
        static validatePasswordLength(password: string, minLength: number, maxLength: number): boolean {
            return password.length >= minLength && password.length <= maxLength;
        }
    }
    
  2. 封装表单提交方法handleSubmit(),用于校验内容是否合规。

  3. 触发提交Button时进行校验,根据校验结果对表单内容进行提示,比如添加borderColor提示等。

    @Entry
    @Component
    struct FormValidationExample {
        @State email: string = '';
        @State password: string = '';
        @State emailError: boolean = false;
        @State passwordError: boolean = false;
    
        handleSubmit() {
            this.emailError =!FormValidator.validateEmail(this.email);
            this.passwordError =!FormValidator.validatePasswordLength(this.password, 6, 20);
    
            if (!this.emailError &&!this.passwordError) {
                // 表单校验通过,执行提交操作
                console.log('表单提交成功,邮箱:', this.email, ',密码:', this.password);
            } else {
                console.log('表单校验失败');
            }
        }
    
        build() {
            Column({ space: 20 }) {
                TextField({
                    placeholder: '请输入邮箱',
                    onInput: (value: string) => {
                        this.email = value;
                    }
                })
               .borderColor(this.emailError? Color.Red : Color.Gray)
    
                TextField({
                    placeholder: '请输入密码',
                    type: InputType.Password,
                    onInput: (value: string) => {
                        this.password = value;
                    }
                })
               .borderColor(this.passwordError? Color.Red : Color.Gray)
    
                Button('提交')
                   .onClick(() => {
                        this.handleSubmit();
                    })
            }
           .width('100%')
           .padding({ left: 20, right: 20, top: 50 })
        }
    }
    

【总结】

  • 考虑到HarmonyOS的UI组件和生命周期,工具类需要独立于UI,放在一个单独的文件中,比如utils目录下。
  • 静态方法:工具类通常无需实例化,方法定义为static。
  • 单一职责:一个工具类专注一个功能领域(如StringUtils、FileUtils)。
  • 错误处理:关键逻辑需添加try/catch或返回错误码。
  • 类型安全:使用ArkTS类型注解(如string、number)。

更多关于HarmonyOS鸿蒙Next中验证有没有单独的模块,比如验证非空,邮箱或者电话之类的功能?的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


【问题分析】

楼主想要的输入验证可以具体到时哪一种,如果是TextInput的话,可以使用自带输入模式校验的,如果是楼主自定义的可以自定义规则来校验,下面我用TextInput来举例如何设置校验规则

【解决方案】

1.限制只能输入手机号或者邮箱,TextInput的type属性支持设置不同的输入框类型,利用InputType.PhoneNumber可拉起数字键盘,即可限制类型为手机号码:

build() {
  Column() {
    TextInput({ placeholder: '请输入手机号码' })
      .width('70%')
      .height('58')
      .type(InputType.PhoneNumber)
      .maxLength(11)
  }
  .height('100%')
  .width('100%')
}

2.限制只能输入身份证号。

@Entry
@Component
struct TextInputPage {
  @State message: string = '';
  promptAction: PromptAction = this.getUIContext().getPromptAction();

  build() {
    Column() {
      TextInput({ placeholder: '请输入身份证号', text: $$this.message })
        .inputFilter('[0-9Xx]')
        .maxLength(18)
        .onWillChange((info: EditableTextChangeValue) => {
          let promptAction = this.getUIContext().getPromptAction();
          if (!info.content) {
            return false;
          }
          if (checkIncludeWord(info.content)) {
            // 非最后一位为X,X输入无效
            this.message = info.content.replace(/[xX]/, '')
            this.promptAction.showToast({ message: '输入不符合身份证号规则,仅最后一位可以为x或X' })
            return false
          } else {
            return true
          }
        })
        .onPaste((content, event) => {
          let promptAction = this.getUIContext().getPromptAction();
          if (content.length > 18) {
            this.promptAction.showToast({ message: '身份证号长度不超过18位' })
          }
          if (checkIncludeWord(content)) {
            this.promptAction.showToast({
              message: '输入不符合身份证号规则,除最后一位可为数字或大小写X外,其余应为数字'
            })
          }
        })
    }
  }
}

function checkIncludeWord(content: string) {
  // 检测粘贴内容包含英文字母且非最后一位为x的情况
  let groups = content.match('[a-zA-Z]')
  if (groups && groups.length > 0) {
    if (groups.length === 1 && (content.endsWith('x') || content.endsWith('X')) && content.length === 18) {
      return false;
    }
    return true;
  }
  return false;
}

3.首位不允许出现空格。

利用onWillChange事件监听将要输入的字符,如果字符以空格开头则阻止输入。

@Entry
@Component
export struct Index {
  @State text: string = ''
  controller: TextInputController = new TextInputController()
  @State value: string = '';

  build() {
    Column() {
      TextInput({ text: this.text, placeholder: 'input your word...', controller: this.controller })
        .width('70%')
        .height('58')
        .onWillChange((info) => {
          // 在将要输入时调用的回调。在返回true时,表示正常插入,返回false时,表示不插入。
          this.value = info.content;
          if (this.value.startsWith(' ')) {
            return false
          } else {
            return true
          }
        })
    }
    .height('100%')
    .width('100%')
  }
}

4.限制输入中文、英文、数字或者emoji表情包。

TextInput的inputFilter属性支持输入正则表达式,以下使用正则表达式限制中文字符输入。

build() {
  Column() {
    TextInput({ text: this.text, placeholder: 'input your word...', controller: this.controller })
      .width('70%')
      .height('58')
      .inputFilter('[^\u4e00-\u9fa5]', (val) => {
        console.error('限制输入中文内容 : ', val);
        return 0;
      })
  }
  .height('100%')
  .width('100%')
}

【参考文档】

还有各种输入限制校验,楼主可以参考这个文档进行学习

TextInput限制输入-行业常见问题-公共关键技术方案-场景化知识 - 华为HarmonyOS开发者

鸿蒙Next提供通用验证框架,支持非空、邮箱、电话等常用验证规则。开发者可通过@ohos.util.validator模块调用内置验证器,如使用isEmail()验证邮箱格式、isPhoneNumber()验证电话号码。系统还支持自定义正则表达式验证,通过Validator类实现特定规则校验。

在HarmonyOS Next中,输入验证功能主要通过ArkTS语言的标准库和扩展能力实现,目前没有独立的“验证模块”。开发者可以:

  1. 使用ArkTS内置校验:通过正则表达式(RegExp)和字符串方法进行邮箱、电话等格式验证
  2. 自定义验证工具类:封装常用的验证规则(非空检查、手机号格式、邮箱格式等)
  3. 结合UI组件:配合TextInput等组件的onChange事件实时验证

示例代码:

// 邮箱验证
static isValidEmail(email: string): boolean {
  const pattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return pattern.test(email);
}

// 手机号验证(中国大陆)
static isValidPhone(phone: string): boolean {
  const pattern = /^1[3-9]\d{9}$/;
  return pattern.test(phone);
}

建议将常用验证逻辑封装为工具类,提高代码复用性。

回到顶部