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

时间:2018-05-03 12:41:23

标签: dart flutter

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

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

            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';
            }
          },),

5 个答案:

答案 0 :(得分:7)

我终于找到了答案,实际上它很简单。

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

答案 1 :(得分:5)

由于您使用的是formfield,因此使用键访问其他字段的值将是适当的。您可以像这样声明全局密钥

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";
  },
);

答案 2 :(得分:0)

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

  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

答案 3 :(得分:0)

这是我的方法,非常感谢Suhair。它是基于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>();

答案 4 :(得分:0)

要在 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
    } 
}