Flutter-焦点改变时的文本框反应

Question

我制作了一个程序，用户可以在其中创建一个帐户，但是我对文本字段设置了一些限制（例如，对于名字，它只能接受由A-Z或a-z组成的字符串）。

如果输入错误（例如用户键入“ John1”），我希望在文本字段下显示“错误文本”，但是我不知道该怎么做。简单的方法是使用onEditingComplete，但这仅在用户在键盘上点击“完成”键时有效。

当焦点从一个文本字段更改为另一个文本字段时，是否有办法使“错误文本”出现？

Answer 1

您可以使用文本字段的验证器属性来执行此操作。建议将字段封装在Form()小部件中，然后使用FormTextField()小部件实施验证，如果焦点发生更改或尝试提交，这将使错误显示在文本字段的底部。

示例：

TextFormField(
  onSaved: (String value) {},
  validator: (String value) {
    if (value.isEmpty) {
     return 'Please enter some text';
    }
    return null;
  },
)

错误将在下面以红色字体显示。

Answer 2

如果要在文本/值更改时显示错误文本，则可以执行此操作。

在TextField'onChanged'中，使用一些正则表达式验证用户输入并检查错误，如果使用TextField装饰'errorText'属性发生错误，则可以显示所需的错误。

 Widget phoneNumberTextField() {
return Padding(
  padding: EdgeInsets.fromLTRB(25, 10, 25, 10),
  child: TextField(
    style: TextStyle(color: Colors.white),
    controller: _phoneNumberController,
    maxLength: Constants.PhoneNumberTextFieldMaxLength,
    onChanged: (value) {
      _phoneNumberErrorText =
          validatePhoneNumberTextField(_phoneNumberController.text);
      _hasPhoneNumberError = _phoneNumberErrorText.isNotEmpty;
      setState(() {});
    },
    keyboardType: TextInputType.number,
    decoration: InputDecoration(
        focusedBorder: OutlineInputBorder(
          borderSide: BorderSide(color: Colors.green, width: 1.0),
        ),
        errorText: _hasPhoneNumberError ? _phoneNumberErrorText : null),
  ),
);

}

String validatePhoneNumberTextField(String text) {
String errorText = '';
if (text.length < 1) {
  errorText = 'Phone Number should not be empty';
} else if (text.length != 10) {
  errorText = 'Please enter valid phone number.';
}
return errorText;

}