flutter 如何在TextFormField中验证电子邮件

sg3maiej  于 2022-11-25  发布在  Flutter
关注(0)|答案(8)|浏览(202)

有一种方法可以使用TextFormFieldTextField验证用户的输入,如果不是电子邮件,则拒绝输入。

tyg4sfes

tyg4sfes1#

您可以使用regex执行此操作
窗体和TextFormField类似

Form(
  autovalidateMode: AutovalidateMode.always,
  child: TextFormField(
    validator: (value) => validateEmail(value),
  ),
)

则确认功能

String validateEmail(String? value) {
    String pattern =
        r"^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]"
        r"{0,253}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]"
        r"{0,253}[a-zA-Z0-9])?)*$";
    RegExp regex = RegExp(pattern);
    if (value == null || value.isEmpty || !regex.hasMatch(value))
      return 'Enter a valid email address';
    else
      return null;
  }
aiqt4smr

aiqt4smr2#

要验证表单,你可以使用autovalidate标志并设置一个电子邮件验证器。有很多选项,包括regex或手动编写自己的检查器,但也有一些包已经实现了电子邮件检查。
例如,https://pub.dev/packages/email_validator
要使用它,请将其添加到您的pubspec中:
第一个
还有许多其他的验证包,其中一些支持不同类型的验证。更多的https://pub.dev/packages?q=email+validation请参见此搜索。

8fsztsew

8fsztsew3#

TextFormField(
          validator: (val) => val.isEmpty || !val.contains("@")
              ? "enter a valid eamil"
              : null,
         
          decoration: InputDecoration(hintText: 'email'),
        ),

在验证器中,我们首先检查表单域是否为空,同时检查输入的文本是否不包含“@”。如果这些条件为真,则返回文本“输入有效的电子邮件”,否则不返回任何内容。

2mbi3lxu

2mbi3lxu4#

我建议使用这个名为**validators**的优秀库
1.将依赖项添加到软件包的pubspec.yaml文件中:

dependencies:
      validators: ^2.0.0 # change to latest version

1.从命令行运行:

$ pub get
    // on VSCode u need not do anything.

1.导入Dart代码:

import 'package:validators/validators.dart';

1.验证字段

Form(
  child: TextFormField(
    validator: (val) => !isEmail(val) ? "Invalid Email" : null;,
  ),
)
xnifntxz

xnifntxz5#

前面的答案都讨论了在Form中验证TextFormField的选项。
TextFormFieldTextField
TextField不支持validator:命名参数,但您可以使用前面提到的任何技术,在用户每次修改电子邮件地址文本时检查电子邮件的有效性。

TextField(
    keyboardType: TextInputType.emailAddress,
    textAlign: TextAlign.center,
    onChanged: (value) {
      setState(() {
        _email = value;
        _emailOk = EmailValidator.validate(_email);
      });
    },
    decoration:
        kTextFieldDecoration.copyWith(hintText: 'Enter your email'),
  ),

您可以根据需要使用验证结果。一种可能性是在输入有效的电子邮件地址之前保持login按钮处于禁用状态:

ElevatedButton(
    child: Text('Log In'),
    // button is disabled until something has been entered in both fields.
    onPressed: (_passwordOk && _emailOk) ? ()=> _logInPressed() : null,
  ),
tmb3ates

tmb3ates6#

快速修复🙂在您的TextFormField中使用此选项。

validator: (value) {
  if(value == null || value.isEmpty || !value.contains('@') || !value.contains('.')){
    return 'Invalid Email';
  }
  return null;
},
mklgxw1f

mklgxw1f7#

如果将flutter_form_builderflutter_builder_validators一起使用
电子邮件验证可以轻松完成

FormBuilderTextField(
  name: 'email',
  decoration: InputDecoration(
    labelText: 'Email',
    errorText: _emailError,
  ),
  validator: FormBuilderValidators.compose([
      FormBuilderValidators.required(),
      FormBuilderValidators.email(),
  ]),
),
wtzytmuj

wtzytmuj8#

无需使用外部库或Regex!将文本字段放在表单中,将autovalidate设置为'always',然后在TextFormField中添加一个验证器函数:

Form(
  autovalidateMode: AutovalidateMode.always,
  child: TextFormField(
    validator: validateEmail,
  ),
)

验证器函数:

String? validateEmail(String? value) {    
      if (value != null) {
        if (value.length > 5 && value.contains('@') && value.endsWith('.com')) {
          return null;
        }
     return 'Enter a Valid Email Address';
    }

注意:长度〉5,因为'.com'和'@'共5个字符。

相关问题