regex - 是否可以将文本转换为正则表达式？

Question

例如我有这个文本

1. 1.2345

2. 12.345

所以我的输入表单必须遵循上面的格式。是否可以动态填充正则表达式。例如，我们将使用格式编号 1

用户输入12.345所以会返回false，但是当用户输入5.5555时会返回true，但当用户输入 1.23 时，它将返回 true 并且数字将变为 1.2300

在 JavaScript 中，我正在这样做

var inputVal = $(this).val();
        if (inputVal == "") return;
        if (inputVal.indexOf('.') !== -1) {
            var inputValSplitdot = inputVal.split(".");
            var inputFormatSplitDot = inputFormat.split(".");
            if (inputValSplitdot[1].length < inputFormatSplitDot[1].length) {
                var compareResult = inputFormatSplitDot[1].length - inputValSplitdot[1].length
                var zeroItem = "0".repeat(compareResult);
                $(this).val(inputVal + zeroItem);
            }
        } else {
            $(this).val(inputVal + ".").change();
        }

如何在 flutter/dart 中实现目标？提前致谢

Answer 1

这个问题在 Flutter 中可以优雅地解决。

首先，在InputFormatter中使用RegEx来确保用户只能输入数字(0-9)和小数点(.)，而不能输入任何其他字符

inputFormatters: [
  // Make sure user can only enter numbers and decimal points
  FilteringTextInputFormatter.allow(RegExp(r'[0-9\.]')),
],

其次，将输入的总长度限制为6，这样用户就不能输入超过这个长度的内容:

maxLength: 6

(完成此操作后，Flutter 会自动添加一个计数器，如果您不需要该计数器，可以通过设置 counterText: '' 轻松禁用它。)

最后，使用 TextEditingController 监视输入，并检查输入的值是否有效且在范围内:

bool isValid(String input) {
  if (input.isEmpty) return true; // initial empty string is okay
  final number = double.tryParse(input); // try to parse the string
  if (number == null) return false; // parse failed: invalid format
  if (number >= 100) return false; // range failed: larger than 99.999
  return true;
}

完整源代码:

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: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("TextField Demo")),
      body: Center(
        child: SizedBox(
          width: 200,
          child: VerifiedTextField(),
        ),
      ),
    );
  }
}

class VerifiedTextField extends StatefulWidget {
  @override
  _VerifiedTextFieldState createState() => _VerifiedTextFieldState();
}

class _VerifiedTextFieldState extends State<VerifiedTextField> {
  final _controller = TextEditingController();
  bool _valid = true;

  @override
  void initState() {
    _controller.addListener(() {
      final valid = isValid(_controller.text);
      setState(() => _valid = valid);
    });
    super.initState();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return TextField(
      controller: _controller,
      inputFormatters: [
        // Make sure user can only enter numbers and decimal points
        FilteringTextInputFormatter.allow(RegExp(r'[0-9\.]')),
      ],
      maxLength: 6,
      decoration: InputDecoration(
        errorText: _valid ? null : "Incorrect Format",
        // counterText: '', // apply this code, if you don't want a counter
      ),
    );
  }

  bool isValid(String input) {
    if (input.isEmpty) return true; // initial empty string is okay
    final number = double.tryParse(input); // try to parse the string
    if (number == null) return false; // parse failed: invalid format
    if (number >= 100) return false; // range failed: larger than 99.999
    return true;
  }
}

当然，如果您更喜欢按照 JS 中的方式进行操作，则可以相应地修改 isValid 函数。