HarmonyOS 鸿蒙Next select校验

HarmonyOS 鸿蒙Next select校验

Text() {
  Span('Relationship with the recipient').fontColor('#303030').fontSize(20).fontWeight(600)
  Span('*').fontColor('#EB3327')
}.width('100%').textAlign(TextAlign.Start)
Select(this.options)
  .selected(this.index)
  .backgroundColor('#FFFFFF')
  .value(this.txt)
  .font({ size: 16, weight: 500 })
  .fontColor('#182431')
  .selectedOptionFont({ size: 16, weight: 400 })
  .optionFont({ size: 16, weight: 400 })
  .space(this.space)
  .borderRadius(12)
  .menuAlign(MenuAlignType.START, { dx: 0, dy: 0 })
  .optionWidth(300)
  .optionHeight(300)
  .width('100%')
  .onSelect((index: number, text: string) => {
    this.index = index;
    if (text) {
      this.txt = text;
    }
  })
  .margin({ top: 12, bottom: 24 })

点击select但是没有选值，触发校验


更多关于HarmonyOS 鸿蒙Next select校验的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

感谢您的提问，为了更快解决您的问题，麻烦请补充以下信息：

  • 问题现象（如：报错日志、异常截图、问题背景）
  • 期望实现效果。

更多关于HarmonyOS 鸿蒙Next select校验的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


主要是点击select时没有选择内容就需要触发校验，

楼主指的是触发什么校验，

  • 触发字段校验
  • 触发表单校验
  • 触发条件校验

鸿蒙Next中select组件校验可通过声明式UI的@State和条件渲染实现。在ArkUI中，使用@State绑定选中状态，通过if/else或条件运算符动态控制校验逻辑。例如：

[@State](/user/State) selected: boolean = false

build() {
  Select({
    // 配置选项
  })
  .onChange((value) => {
    this.selected = (value !== undefined)
  })

  if (!this.selected) {
    Text('请选择选项').fontColor('red')
  }
}

校验失败时可结合ArkUI动画或状态样式提示用户。表单校验建议配合@Watch监听选择值变化。

Relationship with the recipient*
请选择关系

回到顶部