登录页面手机号输入长度不对仍然可以点击登录
=====================

#### 问题现象

在应用登录页面，输入大于11位的手机号，仍然可以点击登录。

#### 背景知识

[TextInput](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-textinput)：单行文本输入框组件，用于用户输入。

#### 问题定位

通过UIViewer查看页面布局，手机号输入框采用TextInput组件，最多可以输入15位长度，而不是手机号的标准长度11位，还可以输入“+”、“-”符号，说明没有对输入框做长度限制。![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/e3/v3/1dmQwaorScKFDq4TAyFcEw/zh-cn_image_0000002628601516.png?HW-CC-KV=V1&HW-CC-Date=20260709T133945Z&HW-CC-Expire=86400&HW-CC-Sign=FE34567F6EBDA656AFEDEE61E1073009D09C9F3C2AE456A9FDA13546C7ACC9D0 "点击放大")

#### 分析结论

为了允许用户可以输入区号例如“+86-”，开发者设置的文本输入最大长度与标准手机号的长度不一致。

#### 修改建议

*   将区号和手机号分开输入，避免造成用户误解；
*   通过TextInput组件的[type](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-textinput#type)和[maxLength](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-textinput#maxlength)来限制手机号输入格式。示例代码如下：
    
    const MAX\_LENGTH: number = 11;
    
    @Entry
    @Component
    struct PasswordInput {
      @State phoneNumber: string = '';
    
      build() {
        Column() {
          TextInput({
            placeholder: '请输入手机号码'
          })
            .type(InputType.PhoneNumber)
            .maxLength(MAX\_LENGTH)
            .onChange((data) => {
              this.phoneNumber = data;
            })
            .width('70%');
        }
        .justifyContent(FlexAlign.Center)
        .height('100%')
        .width('100%');
      }
    }