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

#### 问题现象

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

#### 背景知识

TextInput：单行文本输入框组件，用于用户输入。

#### 问题定位

通过UIViewer查看页面布局，手机号输入框采用TextInput组件，最多可以输入15位长度，而不是手机号的标准长度11位，还可以输入“+”、“-”符号，说明没有对输入框做长度限制。

#### 分析结论

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

#### 修改建议

*   将区号和手机号分开输入，避免造成用户误解；
*   通过TextInput组件的type和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%');
      }
    }
    ```