forms - Flutter 应用程序默认在 Form 中的任何 TextField 的 Trim() 输入值

Question

我有不同的表单域，我想在 validator 之前默认修剪表单域的每个值方法被触发。

我想要实现这个的原因是因为如果我运行 regex在 validator 时的输入值上方法被触发，正则表达式将在 input_text.hasMatch 上返回 false因为输入值末尾有一个无用的空格字符。

例如。下面的代码 alphaNumericText.hasMatch(val)将返回 false，因为输入值末尾有无用的额外空格字符。

final alphaNumericText = RegExp(r'^[a-zA-Z0-9]+$');

TextFormField(
                  keyboardType: TextInputType.text,
                  decoration: new InputDecoration(
                    labelText: 'Enter your nickname',
                  ),
                  validator: (val) {
                    if (val.isEmpty == true) {
                      return 'Nickname is required!';
                    }
                    if (alphaNumericText.hasMatch(val) == false) {
                      return 'Use alphanumeric characters only in nickname.';
                    }
                    return null;
                  },
                  onSaved: (val) => this.nickname = val,
                ),

注意 我不想通过修改 alphaNumericText RegExp 来实现这一点在输入值的末尾招待额外的空间。我不想以这种方式实现这一目标。

我想要的是在 validator 之前默认验证 表单中所有 TextFields 中的每个值方法被调用。

Answer 1

只需添加

inputFormatters: [WhitelistingTextInputFormatter(RegExp(r'[a-zA-Z0-9]'))],

作为 TextInputField 的属性并且用户甚至无法输入空格或白名单以外的任何其他字符您还可以从验证器中删除额外的检查

完整示例

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: Center(
            child: TextFormField(
              inputFormatters: [WhitelistingTextInputFormatter(RegExp(r'[a-zA-Z0-9]'))],
              keyboardType: TextInputType.text,
              decoration: new InputDecoration(
                labelText: 'Enter your nickname',
              ),
              validator: (val) {
                if (val.isEmpty == true) {
                  return 'Nickname is required!';
                }
                return null;
              },
              onSaved: (val) {},
            ),
          ),
        ),
      ),
    );
  }
}