HarmonyOS Next 教育应用注册页面开发（二）

3. 区镇选择对话框

使用 CustomDialogController 创建一个自定义对话框，用于选择所在区镇。通过 onConfirm 方法处理用户选择的结果。

dialogController: CustomDialogController = new CustomDialogController({
  builder: districtTownDialog(
    {
      cancel: () => {
        this.onCancel();
      },
      confirm: (selectedValues: string[], selectedindexs: number[]) => {
        this.onConfirm(selectedValues, selectedindexs);
      },
      selected: this.districtTownSelected
    }),
  alignment: DialogAlignment.Bottom,
  offset: { dx: 0, dy: 0 },
  customStyle: true,
  autoCancel: false
});

onConfirm(selectedValues: string[], selectedIndex: number[]) {
  this.dialogController.close()
  if (selectedValues?.length == 0) {
    let arr = ['辽宁省', '沈阳市', '沈河区']
    this.districtTown = arr.join(' ');
    this.districtTownSelected = [0, 0, 0]
  } else {
    this.districtTown = (selectedValues as string[])?.join(' ');
    this.districtTownSelected = selectedIndex
  }
}

4. 用户输入处理

通过 TextInput 组件获取用户输入的信息，并使用 onChange 事件更新对应的状态。

TextInput({ placeholder: '手机号码', text: this.phone })
  .type(InputType.PhoneNumber)
  .TextBgColorStyle()
  .layoutWeight(1)
  .onChange((value: string) => {
    this.phone = value;
  })

5. 验证码获取与验证

用户点击“获取验证码”按钮时，会检查手机号码是否为空，若不为空则生成验证码并提示用户查看。注册时会验证用户输入的验证码是否正确。

Text('获取验证码')
  .fontColor($r('app.color.font_gray_color'))
  .onClick(() => {
    if (this.phone === '') {
      promptAction.showToast({
        message: '请输入手机号码！',
        duration: AccountCommonConstants.TOAST_INTERVAL_TIME
      })
      return
    }
    this.ReturnCode = AccountCommonConstants.VERIFY_NUMBER;
    promptAction.showToast({
      message: '验证码已生成，请在控制台中查看',
      duration: AccountCommonConstants.TOAST_INTERVAL_TIME
    })
  })

// 注册时验证验证码
if (this.verifyCode !== this.ReturnCode) {
  promptAction.showToast({
    message: '请输入正确的验证码！',
    duration: AccountCommonConstants.TOAST_INTERVAL_TIME
  })
  return
}

6. 密码验证

注册时会验证密码是否符合规则（字母大小写数字混合 8 - 16 位），以及密码和确认密码是否相等。

let pattern = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{8,16}$/;
if (!pattern.test(this.password)) {
  promptAction.showToast({
    message: '密码不符合要求！',
    duration: AccountCommonConstants.TOAST_INTERVAL_TIME
  })
  return
}
if (this.password !== this.confirmPassword) {
  promptAction.showToast({
    message: '密码和确认密码不相等！',
    duration: AccountCommonConstants.TOAST_INTERVAL_TIME
  })
  return
}

7. 注册按钮状态与点击事件

注册按钮的启用状态由 isRegisterClickable 函数决定，只有当所有必填项都填写且同意协议时，按钮才可用。点击注册按钮时，会进行一系列验证，验证通过则提示注册成功并返回上一页。

Button($r('app.string.register_title'))
  .width('92%')
  .enabled(isRegisterClickable(this.phone, this.verifyCode, this.password, this.confirmPassword, this.name,
    this.idCard, this.districtTown, this.company, this.industryType, this.isAgree) && !this.isRegister)
  .onClick(() => {
    // 验证逻辑...
    promptAction.showToast({
      message: '注册成功',
      duration: AccountCommonConstants.TOAST_INTERVAL_TIME
    })
    this.pathStack.pop();
  })

function isRegisterClickable(phone: string, verifyCode: string, password: string, confirmPassword: string, name: string,
  idCard: string, districtTown: string, company: string, industryType: string, isAggree: boolean): boolean {
  return phone !== '' && verifyCode !== '' && password !== '' && confirmPassword !== '' && name !== '' &&
    idCard !== '' && districtTown !== '' && company !== '' && industryType !== '' && isAggree
}

总结

通过上述代码，利用 HarmonyOS Next 的 ArkTS 开发框架，成功实现了一个教育应用的用户注册页面。该页面具备用户输入信息收集、隐私保护、验证码获取与验证、密码验证等功能，确保了用户注册的安全性和便捷性。同时，页面的状态管理和事件处理逻辑清晰，体现了 HarmonyOS Next 开发的高效性和灵活性。开发者可以根据实际需求进一步扩展页面功能，如增加更多的验证规则、优化用户提示信息等。