HarmonyOS鸿蒙Next中验证有没有单独的模块,比如验证非空,邮箱或者电话之类的功能?
HarmonyOS鸿蒙Next中验证有没有单独的模块,比如验证非空,邮箱或者电话之类的功能? 输入验证有没有单独的模块,比如验证非空,邮箱或者电话之类的功能?
开发者你好,参考以下方案:
【解决方案】
-
创建一个工具类,将常用的校验规则封装在其中,例如校验邮箱、手机号码、密码长度等。
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; } } -
封装表单提交方法handleSubmit(),用于校验内容是否合规。
-
触发提交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%')
}
【参考文档】
还有各种输入限制校验,楼主可以参考这个文档进行学习
鸿蒙Next提供通用验证框架,支持非空、邮箱、电话等常用验证规则。开发者可通过@ohos.util.validator模块调用内置验证器,如使用isEmail()验证邮箱格式、isPhoneNumber()验证电话号码。系统还支持自定义正则表达式验证,通过Validator类实现特定规则校验。
在HarmonyOS Next中,输入验证功能主要通过ArkTS语言的标准库和扩展能力实现,目前没有独立的“验证模块”。开发者可以:
- 使用ArkTS内置校验:通过正则表达式(RegExp)和字符串方法进行邮箱、电话等格式验证
- 自定义验证工具类:封装常用的验证规则(非空检查、手机号格式、邮箱格式等)
- 结合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);
}
建议将常用验证逻辑封装为工具类,提高代码复用性。

