文章目录前言基础绑定代码实现实时校验边输入边提示核心代码完整示例提交时统一拦截代码解析用 Builder 抽一个带校验的输入框实现拆解常见误区小白必踩完整可运行示例表单校验代码清单写在最后前言登录、注册、反馈、下单——几乎所有 app 都有表单。表单最烦的不是布局而是输入校验手机号对不对、密码够不够长、两次密码一不一致。这篇文章我把一个注册表单从头写到尾重点讲怎么在用户输入时就做校验、怎么在提交时统一拦截。照着这套写你的表单不会再出现点了提交才告诉我格式错。基础绑定TextInput通过text和onChange跟状态双向绑定代码实现Localphone:stringLocalpwd:stringbuild(){Column({space:12}){TextInput({placeholder:请输入手机号,text:this.phone}).onChange((v){this.phonev}).type(InputType.PhoneNumber)// 弹出数字键盘TextInput({placeholder:请输入密码,text:this.pwd}).onChange((v){this.pwdv}).type(InputType.Password)// 密码遮罩}.padding(16)}要点.type(InputType.PhoneNumber)手机号输入框弹数字键盘体验更好。.type(InputType.Password)密码输入显示圆点遮罩。onChange里更新状态这是表单数据收集的命脉。实时校验边输入边提示不要等提交才校验。用户输入时即时判断并显示错误核心代码LocalphoneError:stringprivatevalidatePhone(v:string){if(v.length0){this.phoneError手机号不能为空}elseif(!/^1[3-9]\d{9}$/.test(v)){this.phoneError手机号格式不正确}else{this.phoneError// 通过清空错误}}// 在 onChange 里调用.onChange((v){this.phonevthis.validatePhone(v)})配合界面上的错误提示完整示例if(this.phoneError){Text(this.phoneError).fontSize(12).fontColor(#FF0000)}这样用户输入的瞬间就能看到红字提示体验远胜提交后才报错。提交时统一拦截点提交时把所有字段再校验一遍只有全过才发请求代码解析asyncfunctionsubmit(){this.validatePhone(this.phone)if(this.phoneError||this.pwd.length6){promptAction.showToast({message:请检查输入})return// 有错就拦住不发请求}// 全部通过提交awaitthis.doRegister(this.phone,this.pwd)}提交前再校验一次防止用户绕过实时校验比如直接点了提交。任何一项不通过就return不发请求。这是表单的最后一道防线。用 Builder 抽一个带校验的输入框表单字段多重复代码多。抽一个通用输入框组件实现拆解BuilderValidatedInput(placeholder:string,value:string,error:string,onVal:(v:string)void){Column(){TextInput({placeholder:placeholder,text:value}).onChange(onVal)if(error){Text(error).fontSize(12).fontColor(#FF0000)}}}// 使用// this.ValidatedInput(手机号, this.phone, this.phoneError, v { this.phone v; this.validatePhone(v) })一个ValidatedInput复用到所有字段注册、登录、反馈表单全通用。常见误区小白必踩误区说明不实时校验等提交才报错用户体验差。用户输入瞬间就该红字提示。提交不统一拦截实时校验可能被绕过比如直接点提交提交时再校验一次是最后防线。type不设导致键盘错手机号用InputType.PhoneNumber弹数字键盘密码用Password遮罩。下面这段代码可以直接复制到 DevEco Studio 里运行。建议你边读边敲改一改文末「动手改一改」里的参数亲眼看看效果。完整可运行示例表单校验实时校验手机号格式校验通过才允许提交。代码清单// TextInput 输入校验EntryComponentstruct Form{Statephone:stringStateerr:stringprivatecheck(v:string){if(!/^1\d{10}$/.test(v)){this.err请输入 11 位手机号}else{this.err// 通过则清空错误}}build(){Column({space:12}){TextInput({placeholder:手机号}).onChange((v){this.phonev;this.check(v)})if(this.err){Text(this.err).fontColor(#E53935).fontSize(12)}Button(提交).enabled(this.errthis.phone.length0)}.padding(20)}}你会看到什么输入非手机号时下方立刻显示红色错误提示且「提交」按钮变灰不可点格式正确后提示消失、按钮恢复可点。动手改一改把正则换成邮箱校验/^\S\S\.\S$/。用TextInput({ text: $$this.phone } })双向绑定简化状态。给错误提示加transition让它平滑出现。写在最后表单校验的黄金法则实时校验给即时反馈提交时再统一拦截。两者缺一不可——实时校验管体验提交拦截管安全。把校验逻辑手机号正则、密码长度抽成独立函数配合ValidatedInput复用你的表单代码会清爽一大截。下次写表单先把这些工具备好再动手。
文章目录前言基础绑定代码实现实时校验边输入边提示核心代码完整示例提交时统一拦截代码解析用 Builder 抽一个带校验的输入框实现拆解常见误区小白必踩完整可运行示例表单校验代码清单写在最后前言登录、注册、反馈、下单——几乎所有 app 都有表单。表单最烦的不是布局而是输入校验手机号对不对、密码够不够长、两次密码一不一致。这篇文章我把一个注册表单从头写到尾重点讲怎么在用户输入时就做校验、怎么在提交时统一拦截。照着这套写你的表单不会再出现点了提交才告诉我格式错。基础绑定TextInput通过text和onChange跟状态双向绑定代码实现Localphone:stringLocalpwd:stringbuild(){Column({space:12}){TextInput({placeholder:请输入手机号,text:this.phone}).onChange((v){this.phonev}).type(InputType.PhoneNumber)// 弹出数字键盘TextInput({placeholder:请输入密码,text:this.pwd}).onChange((v){this.pwdv}).type(InputType.Password)// 密码遮罩}.padding(16)}要点.type(InputType.PhoneNumber)手机号输入框弹数字键盘体验更好。.type(InputType.Password)密码输入显示圆点遮罩。onChange里更新状态这是表单数据收集的命脉。实时校验边输入边提示不要等提交才校验。用户输入时即时判断并显示错误核心代码LocalphoneError:stringprivatevalidatePhone(v:string){if(v.length0){this.phoneError手机号不能为空}elseif(!/^1[3-9]\d{9}$/.test(v)){this.phoneError手机号格式不正确}else{this.phoneError// 通过清空错误}}// 在 onChange 里调用.onChange((v){this.phonevthis.validatePhone(v)})配合界面上的错误提示完整示例if(this.phoneError){Text(this.phoneError).fontSize(12).fontColor(#FF0000)}这样用户输入的瞬间就能看到红字提示体验远胜提交后才报错。提交时统一拦截点提交时把所有字段再校验一遍只有全过才发请求代码解析asyncfunctionsubmit(){this.validatePhone(this.phone)if(this.phoneError||this.pwd.length6){promptAction.showToast({message:请检查输入})return// 有错就拦住不发请求}// 全部通过提交awaitthis.doRegister(this.phone,this.pwd)}提交前再校验一次防止用户绕过实时校验比如直接点了提交。任何一项不通过就return不发请求。这是表单的最后一道防线。用 Builder 抽一个带校验的输入框表单字段多重复代码多。抽一个通用输入框组件实现拆解BuilderValidatedInput(placeholder:string,value:string,error:string,onVal:(v:string)void){Column(){TextInput({placeholder:placeholder,text:value}).onChange(onVal)if(error){Text(error).fontSize(12).fontColor(#FF0000)}}}// 使用// this.ValidatedInput(手机号, this.phone, this.phoneError, v { this.phone v; this.validatePhone(v) })一个ValidatedInput复用到所有字段注册、登录、反馈表单全通用。常见误区小白必踩误区说明不实时校验等提交才报错用户体验差。用户输入瞬间就该红字提示。提交不统一拦截实时校验可能被绕过比如直接点提交提交时再校验一次是最后防线。type不设导致键盘错手机号用InputType.PhoneNumber弹数字键盘密码用Password遮罩。下面这段代码可以直接复制到 DevEco Studio 里运行。建议你边读边敲改一改文末「动手改一改」里的参数亲眼看看效果。完整可运行示例表单校验实时校验手机号格式校验通过才允许提交。代码清单// TextInput 输入校验EntryComponentstruct Form{Statephone:stringStateerr:stringprivatecheck(v:string){if(!/^1\d{10}$/.test(v)){this.err请输入 11 位手机号}else{this.err// 通过则清空错误}}build(){Column({space:12}){TextInput({placeholder:手机号}).onChange((v){this.phonev;this.check(v)})if(this.err){Text(this.err).fontColor(#E53935).fontSize(12)}Button(提交).enabled(this.errthis.phone.length0)}.padding(20)}}你会看到什么输入非手机号时下方立刻显示红色错误提示且「提交」按钮变灰不可点格式正确后提示消失、按钮恢复可点。动手改一改把正则换成邮箱校验/^\S\S\.\S$/。用TextInput({ text: $$this.phone } })双向绑定简化状态。给错误提示加transition让它平滑出现。写在最后表单校验的黄金法则实时校验给即时反馈提交时再统一拦截。两者缺一不可——实时校验管体验提交拦截管安全。把校验逻辑手机号正则、密码长度抽成独立函数配合ValidatedInput复用你的表单代码会清爽一大截。下次写表单先把这些工具备好再动手。
