Flutter TextField 手机号正则表达式输入框
时间: 2023-07-05 14:33:03 浏览: 321
好的,关于 Flutter TextField 手机号正则表达式输入框,可以这样实现:
```dart
TextField(
decoration: InputDecoration(
labelText: '手机号',
hintText: '请输入手机号',
),
keyboardType: TextInputType.phone,
inputFormatters: [
WhitelistingTextInputFormatter(RegExp("[0-9]")), // 只允许输入数字
LengthLimitingTextInputFormatter(11), // 限制长度为11位
PhoneTextInputFormatter(), // 格式化手机号
],
)
```
其中 `PhoneTextInputFormatter` 是自定义的一个手机号格式化器,实现如下:
```dart
class PhoneTextInputFormatter extends TextInputFormatter {
// 自定义手机号格式化正则表达式
final _regexp = RegExp(r'^(\d{3})(\d{1,4})?(\d{1,4})?$');
@override
TextEditingValue formatEditUpdate(TextEditingValue oldValue, TextEditingValue newValue) {
// 获取输入的文本
String text = newValue.text;
// 如果输入为空或格式已经正确,则不做处理
if (text.isEmpty || _regexp.hasMatch(text)) {
return newValue;
}
// 格式化手机号
String formattedText = '';
for (int i = 0; i < text.length; i++) {
formattedText += text[i];
if (i == 2 || i == 6) {
formattedText += ' ';
}
}
// 返回格式化后的文本和光标位置
return TextEditingValue(
text: formattedText,
selection: TextSelection.collapsed(offset: formattedText.length),
);
}
}
```
这样就实现了一个可以输入手机号的 TextField,并且会自动格式化手机号的输入框。
阅读全文