HarmonyOS 表单验证入门：用 RegexUtil 一行代码搞定手机号和邮箱验证

背景

近期发现一款很有意思的HarmonyOS 三方库, 地址 @pura/harmony-utils(V1.4.0) , 作者是"桃花镇童长老", 我这里也是直接通过该作者公布的源码进行案例编写进行,写了到目前写了一部分demo ,感觉确实很有帮助,这里呢也是开始写一个系列的演示demo 供大家参考。如有帮助可以在OpenHarmony中进行下载安装进行使用哦

案例demo导航展示

↓↓↓↓↓↓接下来言归正传 ↓↓↓↓
做 HarmonyOS 应用，登录注册页面的表单验证是逃不掉的。手机号格式对不对？邮箱地址合不合法？自己写正则既麻烦又容易出错。

RegexUtil提供了开箱即用的验证方法，isPhone("13800138000")一行代码搞定，比自己写正则省事多了。

方法总览

isPhone：手机号验证

中国大陆手机号的格式：11位数字，以 1 开头，第二位是 3-9 之间的数字。

// Demo 代码this.Btn('isPhone() 验证','#4A90E2',()=>{this.addLog(`isPhone("${this.inputPhone}") →${RegexUtil.isPhone(this.inputPhone)}`);})this.Btn('isPhone("13800138000") ✓','#4A90E2',()=>{this.addLog(`isPhone("13800138000") →${RegexUtil.isPhone('13800138000')}`);})this.Btn('isPhone("12345") ✗','#7FB3F5',()=>{this.addLog(`isPhone("12345") →${RegexUtil.isPhone('12345')}`);})

实际运行结果：

• isPhone("13800138000")→true（正确的手机号）
• isPhone("12345")→false（太短，格式不对）
• isPhone("19900001234")→true（199 号段也支持）
• isPhone("20000138000")→false（不是以 1 开头）

在表单里用 isPhone

实际项目里，手机号验证通常绑定在输入框的变化事件和提交按钮上：

@Statephone:string='';@StatephoneError:string='';// 输入框TextInput({text:this.phone,placeholder:'请输入手机号'}).width('100%').height(40).fontSize(13).inputFilter('[0-9]')// 只允许输入数字.maxLength(11).onChange(v=>{this.phone=v;// 输入满 11 位时实时验证if(v.length===11){this.phoneError=RegexUtil.isPhone(v)?'':'手机号格式不正确';}else{this.phoneError='';}})// 错误提示if(this.phoneError!==''){Text(this.phoneError).fontSize(12).fontColor('#E74C3C')}// 提交按钮验证Button('提交').onClick(()=>{if(!RegexUtil.isPhone(this.phone)){this.phoneError='请输入正确的手机号';return;}// 继续提交逻辑})

isEmail：邮箱验证

邮箱格式规则比手机号复杂一些，但isEmail封装好了：

this.Btn('isEmail() 验证输入','#27AE60',()=>{this.addLog(`isEmail("${this.inputEmail}") →${RegexUtil.isEmail(this.inputEmail)}`);})this.Btn('isEmail("user@qq.com") ✓','#27AE60',()=>{this.addLog(`isEmail("user@qq.com") →${RegexUtil.isEmail('user@qq.com')}`);})this.Btn('isEmail("not-an-email") ✗','#58D68D',()=>{this.addLog(`isEmail("not-an-email") →${RegexUtil.isEmail('not-an-email')}`);})

实际运行结果：

• isEmail("test@example.com")→true
• isEmail("user@qq.com")→true
• isEmail("user+tag@gmail.com")→true（带+号的邮箱也支持）
• isEmail("not-an-email")→false（没有@）
• isEmail("user@")→false（@后面没有域名）
• isEmail("@example.com")→false（@前面没有用户名）

Demo 中的输入框绑定方式

Demo 里的 TextInput 和按钮结合方式很典型，值得学：

@StateinputPhone:string='13800138000';@StateinputEmail:string='test@example.com';// 手机号输入区this.SectionTitle('isPhone(phone) 手机号验证')TextInput({text:this.inputPhone,placeholder:'输入手机号'}).width('100%').height(40).fontSize(13).onChange(v=>{this.inputPhone=v;})this.Btn('isPhone() 验证','#4A90E2',()=>{this.addLog(`isPhone("${this.inputPhone}") →${RegexUtil.isPhone(this.inputPhone)}`);})// 邮箱输入区this.SectionTitle('isEmail(content) 邮箱验证')TextInput({text:this.inputEmail,placeholder:'输入邮箱'}).width('100%').height(40).fontSize(13).onChange(v=>{this.inputEmail=v;})this.Btn('isEmail() 验证输入','#27AE60',()=>{this.addLog(`isEmail("${this.inputEmail}") →${RegexUtil.isEmail(this.inputEmail)}`);})

用@State绑定输入框的值，点击验证按钮时直接使用 state 里的值——这是 ArkTS 响应式绑定的标准用法。

常见验证需求对应方法速查

isDigits：纯数字验证

顺带一提，isDigits检查字符串是否全为数字，常用于验证短信验证码、订单号等：

this.Btn('isDigits("12345") ✓','#9B59B6',()=>{this.addLog(`isDigits("12345") →${RegexUtil.isDigits('12345')}`);})this.Btn('isDigits("12a45") ✗','#9B59B6',()=>{this.addLog(`isDigits("12a45") →${RegexUtil.isDigits('12a45')}`);})this.Btn('isDigits("") 空串 ✗','#8E44AD',()=>{this.addLog(`isDigits("") →${RegexUtil.isDigits('')}`);})

实际运行结果：

• isDigits("12345")→true
• isDigits("12a45")→false（包含字母）
• isDigits("")→false（空字符串不算纯数字）

isEmoji：表情符号检测

聊天应用里有时需要检测输入是否包含 emoji，禁止某些场景下输入 emoji：

this.Btn('isEmoji("Hello😊") ✓','#F39C12',()=>{this.addLog(`isEmoji("Hello😊") →${RegexUtil.isEmoji('Hello😊')}`);})this.Btn('isEmoji("Hello World") ✗','#F39C12',()=>{this.addLog(`isEmoji("Hello World") →${RegexUtil.isEmoji('Hello World')}`);})

实际运行结果：

• isEmoji("Hello😊")→true（包含 emoji）
• isEmoji("Hello World")→false（没有 emoji）

写在最后

isPhone和isEmail是日常开发里用得最多的两个方法。直接用，不用自己写正则，减少错误，提高效率。

下一篇聊isValidCard身份证验证，以及isMatch配合内置正则常量的各种验证场景。