如何根据另一个表单字段的值验证另一个表单字段?

Question

我有2个表单字段，我想验证第二个表单字段以匹配第一个表单字段的密码，我尝试但没有成功。感谢您的回答。

更新：我已经有提交按钮及其工作，我希望第二个字段中的验证器验证第一个字段文本以匹配第二个字段。

new TextFormField(
controller: _registerPassController,
decoration: new InputDecoration(labelText: 'Password'),
obscureText: true,
validator: (value) =>
value.isEmpty ? 'Password can't be empty' : null,
onSaved: (value) => _password = value,
),
],
),
new Stack(
alignment: const Alignment(1.0, 1.0),
children: <Widget>[
new TextFormField(
controller: _registerPassController2,
decoration: new InputDecoration(labelText: 'Retype Password'),
obscureText: true,
validator: (value) {
if (value.isEmpty) {
return 'Please enter some text';
}
},),

Answer 1

我终于找到了答案，其实很简单。

new TextFormField(
controller: _registerPassController2,
decoration: new InputDecoration(labelText: 'Retype Password'),
obscureText: true,
validator: (value) {
if (value != _registerPassController.text) {
return 'Password is not matching';
}
},
),

Answer 2

由于您使用的是表单字段，因此使用该键访问其他字段的值是合适的。你可以像这样声明全局键

var passKey = GlobalKey<FormFieldState>();

然后将其传递给密码字段以在验证期间检索其值。

TextFormField(
key: passKey,
obscureText: true,
decoration: InputDecoration(
labelText: "Password"
),
validator: (password){
var result = password.length < 4 ? "Password should have at least 4 characters" : null;
return result;
},
);

然后你可以像这样使用确认验证器中的密码

TextFormField(
obscureText: true,
decoration: InputDecoration(
labelText: "Confirm Password"
),
validator: (confirmation){
var password = passKey.currentState.value;
return equals(confirmation, password) ? null : "Confirm Password should match password";
},
);

Answer 3

我这样做的方法是在提交按钮上进行验证，然后显示一条消息。

String _password;
Widget _passwordField() {
return new TextFormField(
autocorrect: false,
obscureText: true,
decoration: InputDecoration(labelText: 'Password'),
validator: (value) =>
value.isEmpty ? "Password can't be empty" : null,
onSaved: (val) => _password = val;
}
String _passwordConfirm;
Widget _passwordConfirmField() {
return new TextFormField(
autocorrect: false,
obscureText: true,
decoration: InputDecoration(labelText: 'Retype Password'),
validator: (value) =>
value.isEmpty ? "Password can't be empty" : null,
onSaved: (val) => _passwordConfirm = val;
}
final formKey = new GlobalKey<FormState>();
Widget _buildForm() {
return new Form(
autovalidate: true, 
key: formKey, 
child: new Column(children: <Widget>[
_passwordField(),
_passwordConfirmField(),
new RaisedButton(
child: Text('Sign Up'),
onPressed: () => submit()
)
]
}
void submit() {
final form = formKey.currentState;
if (form.validate()) {
form.save();  //this will cause the onSaved method to get called
//you will need to do some additional validation here like matching passwords
if(_password != _passwordConfirm) {
showDialog(....)
} else {
//complete
}
} 
}

注意：这是一个StatefulWidget

Answer 4

这是我的方法，非常感谢Suhair。它基于苏海尔的，但他对我不起作用......

(第一个密码(

TextFormField(
key: passKey,
obscureText: true,
decoration: InputDecoration(labelText: "Password"),
validator: (password) {
var result = password.length < 4
? "Password should have at least 4 characters"
: null;
return result;
},
),

(二(

TextFormField(
obscureText: true,
decoration: InputDecoration(labelText: "Confirm Password"),
validator: (confirmation) {
if (confirmation != passKey.currentState.value) {
return 'Passwords do not match';
} else {
return null;
}
},
),

并且您还需要声明您的变量

var passKey = GlobalKey<FormFieldState>();

Answer 5

要在 TextField 的验证器中完成操作，我们可以使用 onChanged 事件来捕获密码字段的值，并稍后在确认密码字段的验证器中使用它。

String _password;
Widget _passwordField() {
return new TextFormField(
autocorrect: false,
obscureText: true,
decoration: InputDecoration(labelText: 'Password'),
onChanged: (value) => _password = value,
validator: (value) =>
value.isEmpty ? "Password can't be empty" : null,
}
Widget _passwordConfirmField() {
return new TextFormField(
autocorrect: false,
obscureText: true,
decoration: InputDecoration(labelText: 'Retype Password'),
validator: (value) =>
value != _password ? "Passwords do not match!" : null,

}
final formKey = new GlobalKey<FormState>();
Widget _buildForm() {
return new Form(
autovalidate: true, 
key: formKey, 
child: new Column(children: <Widget>[
_passwordField(),
_passwordConfirmField(),
new RaisedButton(
child: Text('Sign Up'),
onPressed: () => submit()
)
]
}
void submit() {
final form = formKey.currentState;
if (form.validate()) {
form.save();  //this will cause the onSaved method to get called
} 
}

Answer 6

您可以使用验证器。

定义验证器：

class TwoFieldsMatchValidator extends TextFieldValidator {
String checkField;
TwoFieldsMatchValidator({required this.checkField, required String errorText}) : super(errorText);
@override
bool get ignoreEmptyValues => true;
@override
bool isValid(String? v) {
return checkField == v;
}
}

使用验证器：

final _controller = TextEditingController();
TextFormField(
...
validator: MultiValidator(
[
TwoFieldsMatchValidator(
checkField: _controller.text,
errorText: "<Error>",
),
],
),
),

希望这将对将来的任何人有所帮助。