有一种方法可以使用TextFormField或TextField验证用户的输入,如果不是电子邮件,则拒绝输入。
TextFormField
TextField
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; }
aiqt4smr2#
要验证表单,你可以使用autovalidate标志并设置一个电子邮件验证器。有很多选项,包括regex或手动编写自己的检查器,但也有一些包已经实现了电子邮件检查。例如,https://pub.dev/packages/email_validator。要使用它,请将其添加到您的pubspec中:第一个还有许多其他的验证包,其中一些支持不同类型的验证。更多的https://pub.dev/packages?q=email+validation请参见此搜索。
autovalidate
8fsztsew3#
TextFormField( validator: (val) => val.isEmpty || !val.contains("@") ? "enter a valid eamil" : null, decoration: InputDecoration(hintText: 'email'), ),
在验证器中,我们首先检查表单域是否为空,同时检查输入的文本是否不包含“@”。如果这些条件为真,则返回文本“输入有效的电子邮件”,否则不返回任何内容。
2mbi3lxu4#
我建议使用这个名为**validators**的优秀库1.将依赖项添加到软件包的pubspec.yaml文件中:
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;, ), )
xnifntxz5#
前面的答案都讨论了在Form中验证TextFormField的选项。TextFormField或TextFieldTextField不支持validator:命名参数,但您可以使用前面提到的任何技术,在用户每次修改电子邮件地址文本时检查电子邮件的有效性。
Form
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按钮处于禁用状态:
login
ElevatedButton( child: Text('Log In'), // button is disabled until something has been entered in both fields. onPressed: (_passwordOk && _emailOk) ? ()=> _logInPressed() : null, ),
tmb3ates6#
快速修复🙂在您的TextFormField中使用此选项。
validator: (value) { if(value == null || value.isEmpty || !value.contains('@') || !value.contains('.')){ return 'Invalid Email'; } return null; },
mklgxw1f7#
如果将flutter_form_builder与flutter_builder_validators一起使用电子邮件验证可以轻松完成
FormBuilderTextField( name: 'email', decoration: InputDecoration( labelText: 'Email', errorText: _emailError, ), validator: FormBuilderValidators.compose([ FormBuilderValidators.required(), FormBuilderValidators.email(), ]), ),
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个字符。
8条答案
按热度按时间tyg4sfes1#
您可以使用regex执行此操作
窗体和TextFormField类似
则确认功能
aiqt4smr2#
要验证表单,你可以使用
autovalidate
标志并设置一个电子邮件验证器。有很多选项,包括regex或手动编写自己的检查器,但也有一些包已经实现了电子邮件检查。例如,https://pub.dev/packages/email_validator。
要使用它,请将其添加到您的pubspec中:
第一个
还有许多其他的验证包,其中一些支持不同类型的验证。更多的https://pub.dev/packages?q=email+validation请参见此搜索。
8fsztsew3#
在验证器中,我们首先检查表单域是否为空,同时检查输入的文本是否不包含“@”。如果这些条件为真,则返回文本“输入有效的电子邮件”,否则不返回任何内容。
2mbi3lxu4#
我建议使用这个名为**validators**的优秀库
1.将依赖项添加到软件包的
pubspec.yaml
文件中:1.从命令行运行:
1.导入Dart代码:
1.验证字段
xnifntxz5#
前面的答案都讨论了在
Form
中验证TextFormField
的选项。TextFormField
或TextField
TextField
不支持validator:
命名参数,但您可以使用前面提到的任何技术,在用户每次修改电子邮件地址文本时检查电子邮件的有效性。您可以根据需要使用验证结果。一种可能性是在输入有效的电子邮件地址之前保持
login
按钮处于禁用状态:tmb3ates6#
快速修复🙂在您的TextFormField中使用此选项。
mklgxw1f7#
如果将flutter_form_builder与flutter_builder_validators一起使用
电子邮件验证可以轻松完成
wtzytmuj8#
无需使用外部库或Regex!将文本字段放在表单中,将autovalidate设置为'always',然后在TextFormField中添加一个验证器函数:
验证器函数:
注意:长度〉5,因为'.com'和'@'共5个字符。