0

我正在 Flutter 中创建一个表单并想要以下功能：

  1. 如果用户输入一个 URL，我想用正则表达式确保它是有效的。
  2. 如果用户将该字段留空，我不想返回错误消息。

当我执行这四个步骤时，以下 Reg Exp 验证器会以这种方式执行：

  • 如果我热重载并输入一个有效的 URL，它就会接受它。
  • 如果我将输入字段更改为新的无效 URL，它仍然会接受它。
  • 如果我热重载并输入无效的 URL，它不接受它。
  • 如果我将 URL 更改为有效的 URL，它仍然不接受它。

就好像它只运行验证器一次，然后不再检查任何后续条目。我确实有一个使用 value.isEmpty 作为验证器的字段，并且每次单击带有 _formKey.currentState.save(); 的按钮时检查输入，它确实按预期工作。

child: TextFormField(
              decoration: InputDecoration(
                border: OutlineInputBorder(),
                labelText: 'Related URL',
              ),
              textInputAction: TextInputAction.next,
              keyboardType: TextInputType.url,
              focusNode: _relatedUrlFocusNode,
              onFieldSubmitted: (_) {
                FocusScope.of(context).requestFocus(_notesFocusNode);
              },
              //this doesn't work
              validator: (String value) {
                if (RegExp(r"[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?")
                        .hasMatch(value)) {
                  return 'Please enter a valid URL';
                }
                return null;
              },
              onSaved: (String value) {
                relatedUrl = value;
              },
            ),

...其他领域...

ElevatedButton(
            child: Text('ADD & ACTIVATE'),
            onPressed: () {
              if (!_formKey.currentState.validate()) {
                return;
              }
              ScaffoldMessenger.of(context)
                  .showSnackBar(SnackBar(content: Text('Processing Data')));
              _formKey.currentState.save();
            },
          )

如何确保每次单击提交时它都会执行验证器？

4

1 回答 1

2

您的代码有两个问题：

  1. 你的支票应该if (!RegExp(r"...").hasMatch(value)) {}是if (RegExp(r"...").hasMatch(value)) {}
  2. 您的正则表达式不正确。你可以在这里查看。（Dart RegExp 与 Javascript RegExp 相同）

带有验证器包的解决方案

您可以使用验证器包来代替 RegExp 。

在此处输入图像描述

轻松复制粘贴的完整源代码：

import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:validators/validators.dart';

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'URL Validation Demo',
      home: HomePage(),
    ),
  );
}

class HomePage extends HookWidget {
  @override
  Widget build(BuildContext context) {
    final _formKey = useState(GlobalKey<FormState>());
    final _focusNode = useFocusNode();
    return Scaffold(
      body: Container(
        padding: EdgeInsets.all(8.0),
        alignment: Alignment.center,
        child: Form(
          key: _formKey.value,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              TextFormField(
                decoration: InputDecoration(
                  border: OutlineInputBorder(),
                  labelText: 'URL',
                ),
                validator: (value) {
                  if (!isURL(value)) {
                    return 'Please enter a valid URL';
                  }
                  return null;
                },
              ),
              const SizedBox(height: 24.0),
              ElevatedButton(
                child: Text('VALIDATE'),
                onPressed: () {
                  if (_formKey.value.currentState.validate()) {
                    ScaffoldMessenger.of(context).showSnackBar(
                        SnackBar(content: Text('Processing Data')));
                  }
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}
于 2021-02-16T12:02:25.253 回答