HarmonyOS鸿蒙Next中自定义登录表单组件-附源码

登录界面效果

校验不通过

这里validateForm 方法内部逻辑还可以更丰富，比如校验密码强度，密码字符串组成等等，可以在这里扩展就可以用了。

校验通过

源码

// 登录
import { CONSTANT } from '../../constant/Constant';
import { router } from '@kit.ArkUI';
import { LoginForm,LoginState } from '../../models/Login';
import { promptAction } from '@kit.ArkUI';

@Entry
@Component
struct Login {
  @State formData:LoginForm = {
    phone: '',
    password: ''
  }
  @State loginError:LoginState = {
    isPhone:false,
    phoneErrorText: '手机号不能为空！',
    isPassword:false,
    passwordErrorText: '密码不能为空！'
  }

  // 表单项校验
  validateForm ():boolean{
    let isPass = false
    const phone = this.formData.phone.trim()
    const password = this.formData.password.trim()
    this.loginError.isPhone = !phone
    this.loginError.isPassword = !password

    if (password.length < 5) {
      promptAction.showToast({
        message: '密码长度必须大于5且小于等于12个字符串'
      })
      this.loginError.passwordErrorText = '密码长度不够'
      this.loginError.isPassword = true
    } else {
      this.loginError.passwordErrorText = '密码不能为空！'
    }

    if (!this.loginError.isPhone&&!this.loginError.isPassword) {
      isPass = true
    } else isPass = false

    return isPass;
  }

  build() {
    Column(){
      Row() {
        Image($r('app.media.back'))
          .fillColor(Color.Blue)
          .margin({ left: CONSTANT.COMMON_DISTANCE })
          .onClick(() => {
            router.back();
          })
          .width(CONSTANT.STATIC_ICON_SIZE)
          .height(CONSTANT.STATIC_ICON_SIZE)
          .objectFit(ImageFit.Contain)
      }
      .justifyContent(FlexAlign.Start)
      .width(CONSTANT.FULL_SIZE)
      Image($r('app.media.startIcon')).objectFit(ImageFit.Auto).width($r('app.float.logo_image_size')).height($r('app.float.logo_image_size'))
      Text('登录界面').fontSize($r('app.float.logo_title_text_size')).fontWeight(FontWeight.Bold).padding(CONSTANT.COMMON_DISTANCE)
      Text('登录账号以使用更多服务').fontColor(Color.Grey)
      Column({space: 8}) {
        TextInput({placeholder:'请输入手机号'}).maxLength(12).type(InputType.PhoneNumber)
          .onChange((value:string) => {
            this.formData.phone = value
          })
        Text(this.loginError.phoneErrorText).fontColor(Color.Red).opacity(this.loginError.isPhone?1:0)
        TextInput({placeholder:'请输入密码'}).maxLength(12).type(InputType.Password)
          .onChange((value:string) => {
            this.formData.password = value
          })
        Text(this.loginError.passwordErrorText).fontColor(Color.Red).opacity(this.loginError.isPassword?1:0)
      }.alignItems(HorizontalAlign.Start).margin({top:20,bottom:20})
      Row() {
        Text('短信验证码登录').fontColor($r('app.color.font_color_blue'))
        Text('忘记密码').fontColor($r('app.color.font_color_blue'))
      }.width(CONSTANT.FULL_SIZE).justifyContent(FlexAlign.SpaceBetween)
      Button() {
        Text('登录').fontColor('#fff')
      }.width('80%').height(36).margin({top:50,bottom: 20})
      .onClick(() => {
        if(this.validateForm()) {
          console.log('校验通过')
          promptAction.showToast({ message:"欢迎使用鸿蒙APP", duration: 3 })
          setTimeout(() => router.pushUrl({ url: 'pages/Index'}), 3)
        } else {
          console.log('校验失败')
        }
      })
      Text('注册账号').fontColor($r('app.color.font_color_blue'))
    }.margin({left:CONSTANT.COMMON_MARGIN_SIZE_TWENTY, right:CONSTANT.COMMON_MARGIN_SIZE_TWENTY})
  }
}