HarmonyOS-TextInput、Checkbox、正则一、用户输入日常开发中如果需要接收用户输入，就可以使用

一、用户输入

日常开发中如果需要接收用户输入，就可以使用输入组件来完成场景.jpeg

1. TextInput（单行输入框组件）

语法：TextInput(value?:{placeholder?: ResourceStr, text?: ResourceStr})
常用参数

****参数名	类型	是否必填	说明
placeholder	[ResourceStr]	否	设置无输入时的提示文本。
text	[ResourceStr]	否	设置输入框当前的文本内容。从API version 10开始，该参数支持[ $$ ]双向绑定变量。

常用属性

名称	参数类型	描述
type	InputType	设置输入框类型。默认值：InputType.Normal
showUnderline	boolean	设置是否开启下划线。下划线默认颜色为'#33182431'，默认粗细为1px，文本框尺寸48vp（下划线只支持InputType.Normal类型）。默认值：false
passwordIcon	PasswordIcon	onIconSrc:输入状态时图标offIconSrc:隐藏状态时图标
placeholderColor	[ResourceColor]	设置placeholder文本颜色。默认值跟随主题。

@Entry
@Component
struct Index {
  @State textinout:string=  'asd'
  build() {
    Column() {

      TextInput({placeholder:'请输入账号',text:$$this.textinout})
        .placeholderColor('#f00')
      Button('获取输入账号')
        .onClick(()=>{
          AlertDialog.show({message:this.textinout})
        })
      TextInput()
        .type(InputType.Password)
        .passwordIcon({
          onIconSrc:$r('app.media.ic_eyes_open'),
          offIconSrc:$r('app.media.ic_eyes_close')
        })
    }
    .width('100%')
    .height('100%')
  }
}

TEXTInput的使用.gif

2. TextArea（多行输入框）

TextArea 可以用来设置多行文本，用法和TextInput基本一致
语法：TextArea(value?:{placeholder?: ResourceStr, text?: ResourceStr})
常用参数

****参数名	类型	是否必填	说明
placeholder	[ResourceStr]	否	设置无输入时的提示文本
text	[ResourceStr]	否	设置输入框当前的文本内容。从API version 10开始，该参数支持[ $$ ]双向绑定变量。

常用属性

名称	参数类型	描述
type	TextAreaType	设置输入框类型。
placeholderColor	[ResourceColor]	设置placeholder文本颜色。默认值跟随主题。
showCounter	value: boolean, options11+?: [InputCounterOptions]	参数value为true时，才能设置options，文本框开启计数下标功能，需要配合maxlength（设置最大字符限制）一起使用。
maxLength	number	设置文本的最大输入字符数。默认不设置最大输入字符数限制。到达文本最大字符限制，将无法继续输入字符，同时边框变为红色。

@Entry
@Component
struct Index {
  @State textinout:string=  'asd'
  build() {
    Column() {
      TextArea({placeholder:'文本',text:this.textinout})
        .type(TextAreaType.NUMBER_DECIMAL)
        .placeholderColor(Color.Red)
        .showCounter(true)
        .maxLength(20)
    }
    .width('100%')
    .height('100%')
  }
}

TEXTArea的使用.gif

二、多选框

1. Checkbox

语法：Checkbox(options?: CheckboxOptions)
参数CheckboxOptions说明

名称	类型	必填	描述
name	string	否	用于指定多选框名称。一般结合CheckboxGroup一起使用
group	string	否	用于指定多选框所属群组的名称（即所属CheckboxGroup的名称）。

常用属性

名称	参数类型	描述
select	boolean	设置多选框是否选中。默认值：false 从API version 9开始，该接口支持在ArkTS卡片中使用。从API version 10开始，该属性支持[$$]双向绑定变量。
selectedColor	[ResourceColor]	设置多选框选中状态颜色。说明：默认值：$r(‘sys.color.ohos_id_color_text_primary_activated’)。异常值按照默认值处理。从API version 9开始，该接口支持在ArkTS卡片中使用。
unselectedColor	[ResourceColor]	设置多选框非选中状态边框颜色。
shape	[CheckBoxShape]	设置CheckBox组件形状, 包括圆形和圆角方形。说明：默认值：CheckBoxShape.CIRCLE。

@Entry
@Component
struct CheckBoxPage {
  @State isChecked:boolean = false
  build() {
    Column(){
      Text('选中状态:'+this.isChecked)
      Row(){
        Checkbox()
          .borderWidth(0)
          .selectedColor('#ab8b53')
          .select($$this.isChecked)
        Text(){
          Span('已阅读并同意')
            .fontColor(Color.Gray)
          Span('《用户协议》')
          Span('《隐私协议》')
        }
        .fontSize(14)
        .fontColor('#0094ff')
      }
      Button('切换选中状态')
        .onClick(()=>{
          this.isChecked=!this.isChecked
        })

    }
    .padding(20)
  }
}

多选框的使用.gif

2. CheckboxGroup

如果要控制多个 Checkbox 的选中状态，可以通过CheckBoxGroup来实
语法：CheckboxGroup(options?: CheckboxGroupOptions)
参数说明(CheckboxGroupOptions)

名称	类型	必填	说明
group	string	否	群组名称。说明：多个相同群组名称的CheckboxGroup，仅第一个CheckboxGroup生效。

常用属性

名称	参数类型	描述
selectAll	boolean	设置是否全选。默认值：false，若同组的[Checkbox]设置了select属性，则Checkbox的优先级高。该属性支持[$$]双向绑定变量。
selectedColor	[ResourceColor]	设置被选中或部分选中状态的颜色。
unselectedColor	[ResourceColor]	设置非选中状态边框颜色。

@Entry
@Component
struct CheckBoxGroupPage {
  fruits:string[] = ['西瓜','西红柿','西兰花','西葫芦']
  build() {
    Column(){
      Row(){
        CheckboxGroup()
        Text('全选')
      }
      Column(){
        ForEach(this.fruits,(item:string,index:number)=>{
          Row(){
            Checkbox()
            Text(item)
          }
        })
      }
      .padding({left:20})
      .alignItems(HorizontalAlign.Start)
    }.padding(20)
    .alignItems(HorizontalAlign.Start)

  }
}

多选框组的使用.gif

三、正则表达式

日常开发中主要用来做三件事:匹配、替换、提取

手机号表单要求用户只能输入11位的数字 (匹配)
过滤掉页面内容中的一些敏感词(替换)
从字符串中获取我们想要的特定部分(提取)等

1. 基本使用

// 方式 1：简写
const res1: RegExp = /ArkTS/
// 方式 2：通过实例化的方式创建
const reg2: RegExp = new RegExp('ArkTS')

//使用
const res = /asdf/
console.log('res:',res.test('asdfghj'))

const res1 = /QaQ/
console.log('res1',res1.test('QaQaa'))
console.log('res1',res1.test('QaqQ'))

正则基本使用.png

2. 元字符

2.1. 边界符

正则表达式中的边界符（位置符）用来提示字符所处的位置，主要有两个字符

边界符	说明
^	表示匹配行首的文本（以谁开始）
$	表示匹配行尾的文本（以谁结束）

// 元字符之边界符
// 1. 匹配开头的位置 ^
console.log('res1:', /^ArkTS/.test('ArkTS语法')) //true
console.log('res2:', /^ArkTS/.test('学习ArkTS')) //false
console.log('res3:', /^ArkTS/.test('学习ArkTS语法')) //false
console.log('res4:', /^ArkTS/.test('Ar')) //false

// 2. 匹配结束的位置 $
console.log('res:', /ArkTS$/.test('ArkTS语法')) //false
console.log('res:', /ArkTS$/.test('学习ArkTS')) //true
console.log('res:', /ArkTS$/.test('学习ArkTS语法')) //false
console.log('res:', /ArkTS$/.test('Ar')) //false

// 3. 精确匹配 ^ $
console.log('res:', /^ArkTS$/.test('ArkTS语法')) //false
console.log('res:', /^ArkTS$//^ArkTS$//^ArkTS$//^ArkTS$//^ArkTS$/.test('学习ArkTS')) //false
console.log('res:', /^ArkTS$//^ArkTS$//^ArkTS$//^ArkTS$/.test('学习ArkTS语法')) //false
console.log('res:', /^ArkTS$//^ArkTS$//^ArkTS$/.test('ArkTS')) //true
console.log('res:', /^ArkTS$//^ArkTS$/.test('Ar')) //false
console.log('res:', /^ArkTS$/.test('ArkTSArkTS')) //false

2.2. 量词

量词	说明
*	重复零次或更多次
+	重复一次或更多次
?	重复零次或一次
{n}	重复 n 次
{n,}	重复 n 次或更多次
{n,m}	重复 n 到 m 次

// 1. {n,} 重复次数 >= n
const reg5 = /^w{2,}$/
console.log('res:', reg5.test('')) //false
console.log('res:', reg5.test('w')) //false
console.log('res:', reg5.test('ww')) //true
console.log('res:', reg5.test('www')) //true
console.log('res:', '-----------------------')

// 2. {n,m}   n =< 重复次数 <= m
const reg6 = /^w{2,4}$/
console.log('res:', reg6.test('w')) //false
console.log('res:', reg6.test('ww')) //true
console.log('res:', reg6.test('www')) //true
console.log('res:', reg6.test('wwww')) //true
console.log('res:', reg6.test('wwwww')) // false

2.3. 范围

表示字符的范围，定义的规则限定在某个范围，比如只能是英文字母，或者数字等等，用表示范围

范围	说明
[abc]	匹配包含的单个字符。也就是只有all bllc 这三个单字符返回true，可以理解为多选1
[a-z]	连字符。来指定字符范围。［a-z］表示 a到226个英文字母
[^abc]	取反符。［^a-z］匹配除了小写字母以外的字符

// 1. [a-z] 连字符 单个
console.log('res:', /^[a-z]$/.test('a')) //T
console.log('res:', /^[a-z]$/.test('p')) //T
console.log('res:', /^[a-z]$/.test('0')) //F
console.log('res:', /^[a-z]$/.test('A')) //F
console.log('res:', '-----------------------')
// 2. [^a-z] 取反符
console.log('res:', /^[^a-z]$/.test('a')) //F
console.log('res:', /^[^a-z]$/.test('A')) //T
console.log('res:', /^[^a-z]$/.test('么')) //T

// 试一试：用户名可以输入英文字母，数字，可以加下划线，要求 6~16位
const reg = /^[a-zA-Z0-9_]{6,16}$/

2.4. 字符类

某些常见模式的简写方式，区分字母和数字

字符类	说明
\d	匹配0-9之间的任一数字，相当于［0-9］
\D	匹配所有0-9以外的字符，相当于［^0-9］
\w	匹配任意的字母、数字和下划线，相当于［A-Za-z0-9_]
\W	除所有字母、数字和下划线以外的字符，相当于［^A-Za-z0-9_］
\s	匹配空格（包括換行符、制表符、空格符等），相等于［\t\r\n\v\f]
\S	匹配非空格的字符，相当于［^\t\r\n\v\f]

2.5. 替换和修饰符

字符串的 replace 方法，可以结合正则进行字符串的替换
语法：字符串.replace(检索规则，替换内容)

修饰符	说明
i	单词 ignore 的缩写，正则匹配时字母不区分大小写
g	单词 global 的缩写，匹配所有满足正则表达式的结果

const res = '奥特曼是日本圆谷株式会社制作进而衍生出的日本特摄英雄的总称。昭和时代的奥特曼作品（《奥特曼》至《爱迪奥特曼》）中奥特曼英雄的出身地均设定成“M78星云”的宇宙人'
//奥特曼 -》假面骑士
const res1 = res.replace(/奥特曼/ig,'假面骑士')
console.log(res1)

替换.png

3. 正则大全

日常开发中正则的时候一般会有现成的正则方便直接调用，这里推荐一个插件any-rule，和一个可视化正则的网站

any-rule 插件的作者提供的在线正则网站，涵盖了很多常用的正则：可以使用在线的，或者插件

网站： any-rule.vercel.app/ 【访问使用】
插件：plugins.jetbrains.com/plugin/1416… 【下载安装】
可视化正则：regexper.com/

插件.png

HarmonyOS-TextInput、Checkbox、正则

一、 用户输入

1. TextInput（单行输入框组件）

2. TextArea（多行输入框）

二、 多选框

1. Checkbox

2. CheckboxGroup

三、 正则表达式

1. 基本使用

2. 元字符

2.1. 边界符

2.2. 量词

2.3. 范围

2.4. 字符类

2.5. 替换和修饰符

3. 正则大全

一、用户输入

二、多选框

三、正则表达式