HarmonyOS 鸿蒙Next 组件封装之文本输入框内容检查

发布于 1周前 作者 yuanlaile 最后一次编辑是 5天前 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 组件封装之文本输入框内容检查

组件封装之文本输入框内容检查 封装注意点： 验证

  checkValiteText(): boolean {
    if(this.name != "txtPerId"){
      this.checkLegal = this.inputText != ""
      return this.inputText != ""
    }else if(this.name == "txtPerId"){
      if (this.inputText == "" || !/(^\d{17}[\d|x]$)|(^\d{15}$)/.test(this.inputText)){
        this.checkLegal = false;
        return false;
      }else{
        this.checkLegal = true;
      }
    }
   return  true;
  }

完整代码

 import { CheckManager } from '../viewmodel/CheckManager'

@Component
export struct TXTCheckComponent {
  @BuilderParam itemContent: (item: object) => void
  @State checkLegal: boolean = true
  @State inputText: string = ""

  checkValite: boolean = false
  name: string = ""
  @State tips:string=""

  changedCallback: (str:string) => void = (str:string) => {}

  aboutToAppear(): void {
    if (this.checkValite) {
      CheckManager.getInstance().checks.set(this.name, () => {
        return this.checkValiteText()
      })
    }
  }

  checkValiteText(): boolean {
    if(this.name != "txtPerId"){
      this.checkLegal = this.inputText != ""
      return this.inputText != ""
    }else if(this.name == "txtPerId"){
      if (this.inputText == "" || !/(^\d{17}[\d|x]$)|(^\d{15}$)/.test(this.inputText)){
        this.checkLegal = false;
        return false;
      }else{
        this.checkLegal = true;
      }
    }
   return  true;
  }

  build() {
    Stack({alignContent:Alignment.Center}){
      Column(){
        Row(){
          Text(this.tips).fontSize(16).textAlign(TextAlign.Start)
          Text('*').fontColor('red').visibility(this.checkValite ? Visibility.Visible : Visibility.None)
          TextInput({placeholder:this.tips, text:this.inputText})
            .backgroundColor('white')
            .textAlign(TextAlign.End)
            .margin({bottom:10})
            .onChange((text: string) => {
              this.inputText = text

              this.changedCallback(text)
            }).borderRadius(4)
            .layoutWeight(1)
        }.width('100%')
        if(!this.checkLegal){
          if( this.name == "txtPerId"){
            Text('请输入合法的'+this.tips).fontColor('red').fontSize(12)
              .visibility(!this.checkLegal ? Visibility.Visible : Visibility.None)
          }else{
            Text('请输入'+this.tips).fontColor('red').fontSize(12)
              .visibility(!this.checkLegal ? Visibility.Visible : Visibility.None)
          }

        }
        Divider().strokeWidth(2)
          .color('#eeeeee')
          .margin({top:10,bottom:10})
      }
    }.width('90%')
  }
}

更多关于HarmonyOS 鸿蒙Next 组件封装之文本输入框内容检查的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
1 回复

更多关于HarmonyOS 鸿蒙Next 组件封装之文本输入框内容检查的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next组件封装中，针对文本输入框（例如TextField或Input组件）的内容检查，通常可以通过监听输入事件或组件状态变化来实现。具体步骤如下：

  1. 绑定事件监听器：为文本输入框绑定一个输入内容变化的事件监听器，如TextChangedListener。

  2. 实现检查逻辑：在事件监听器的回调方法中，编写逻辑来检查输入内容。例如，可以检查是否为空、长度是否达标、是否包含非法字符等。

  3. 反馈检查结果：根据检查结果，实时向用户反馈，如通过显示提示信息、改变输入框的边框颜色等方式。

  4. 阻止非法输入：如果需要，可以在检查到非法输入时，阻止其被接受，或者自动修正输入内容。

示例代码（伪代码，具体实现需根据HarmonyOS SDK文档调整）：

// 伪代码示例，实际应使用HarmonyOS的API
TextField textField = findComponentById(...);
textField.addTextChangedListener(new TextChangedListener() {
    @Override
    public void onTextChanged(CharSequence text) {
        if (!isValidInput(text)) {
            // 显示错误提示
            showError("输入内容不合法");
        } else {
            // 清除错误提示
            clearError();
        }
    }
});

boolean isValidInput(CharSequence text) {
    // 实现你的检查逻辑
    return text != null && text.length() > 0 && !text.contains("非法字符");
}

如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html

回到顶部