Flutter中Regex正则表达式验证手机号失效问题求助

一、修复自定义TextFormField的inputFormatters传递问题 #

如果你的自定义TextFormField无法使用inputFormatters，核心原因是组件未暴露该参数并传递给内部原生TextFormField。修改自定义组件，添加并透传inputFormatters参数：

class CustomTextFormField extends StatelessWidget {
  final String? hintText;
  final TextInputType? keyboardType;
  final List<TextInputFormatter>? inputFormatters;
  final String? Function(String?)? validator;
  final TextEditingController? controller;

  const CustomTextFormField({
    super.key,
    this.hintText,
    this.keyboardType,
    this.inputFormatters,
    this.validator,
    this.controller,
  });

  @override
  Widget build(BuildContext context) {
    return TextFormField(
      controller: controller,
      keyboardType: keyboardType,
      inputFormatters: inputFormatters, // 透传给原生组件
      validator: validator,
      decoration: InputDecoration(
        hintText: hintText,
        border: const OutlineInputBorder(),
      ),
    );
  }
}

二、WhatsApp字段的输入限制与验证 #

要实现仅允许10位数字、禁止特殊字符和空格，结合实时输入限制和提交验证双重保障：

1. 实时输入限制配置 #

使用两个内置TextInputFormatter：

• FilteringTextInputFormatter.digitsOnly：仅允许输入数字
• LengthLimitingTextInputFormatter(10)：限制最多输入10位

2. 提交验证逻辑 #

在validator中检查内容是否为空、是否为10位有效数字。

完整使用示例 #

final _whatsappController = TextEditingController();
final _formKey = GlobalKey<FormState>();

// 在Form组件内使用
CustomTextFormField(
  hintText: "WhatsApp号码",
  keyboardType: TextInputType.number,
  controller: _whatsappController,
  inputFormatters: const [
    FilteringTextInputFormatter.digitsOnly,
    LengthLimitingTextInputFormatter(10),
  ],
  validator: (value) {
    if (value == null || value.isEmpty) {
      return "请输入WhatsApp号码";
    }
    if (value.length != 10) {
      return "请输入10位有效号码";
    }
    return null;
  },
)

// 提交表单时触发验证
void _submitForm() {
  if (_formKey.currentState!.validate()) {
    // 验证通过，执行后续业务逻辑
  }
}

三、年龄字段验证 #

通过inputFormatters限制仅输入数字，再在validator中校验年龄范围：

CustomTextFormField(
  hintText: "年龄",
  keyboardType: TextInputType.number,
  inputFormatters: const [FilteringTextInputFormatter.digitsOnly],
  validator: (value) {
    if (value == null || value.isEmpty) {
      return "请输入年龄";
    }
    final age = int.tryParse(value);
    if (age == null || age < 1 || age > 120) {
      return "请输入1-120之间的有效年龄";
    }
    return null;
  },
)

四、邮箱字段验证 #

使用正则表达式做邮箱格式校验：

CustomTextFormField(
  hintText: "邮箱",
  keyboardType: TextInputType.emailAddress,
  validator: (value) {
    if (value == null || value.isEmpty) {
      return "请输入邮箱";
    }
    // 通用邮箱正则匹配规则
    final emailRegex = RegExp(r'^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$');
    if (!emailRegex.hasMatch(value)) {
      return "请输入有效邮箱地址";
    }
    return null;
  },
)

内容的提问来源于stack exchange，提问作者Mrunal