gpt4 book ai didi

dart - 自动验证问题 : Password and Confirm Password validation with autovalidation in Flutter

转载 作者:行者123 更新时间:2023-12-03 04:02:48 25 4
gpt4 key购买 nike

我创建了 Form 这种形式的小部件有多个 TextFormFeild 我创建了自定义 BoxFeild .我面临与 相关的问题auto-validation 来自表单小部件。无法验证确认密码中的密码匹配字段 BoxFeild

我应该 validate password 保存在中的formKeyData后匹配current state ?

将 key 传递给 BoxFeild 时遇到问题构造函数。它的显示多个小部件使用相同的全局键。

我需要添加全局 FormFeild 键来比较 _password_confirmPassword .

class _PageSignUpState extends State<PageSignUp> {
final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
var passKey = GlobalKey<FormFieldState>();

bool _autoValidate = false;
String _name, _email, _phoneNo, _password, _confirmPassoword;
bool isLoading = false;

final _passwordController = TextEditingController();
final _confirmPassController = TextEditingController();

double width,height;

@override
Widget build(BuildContext context) {


width = MediaQuery.of(context).size.width;
height = MediaQuery.of(context).size.height;

return Scaffold(
backgroundColor: Colors.white,
body: Container(
color: Colors.grey.shade200,
child: Center(
child: SingleChildScrollView(
child: Container(
child: Column(
children: <Widget>[
Form(
key: _formKey,
autovalidate: _autoValidate,
child: Column(
children: <Widget>[
_nameWidget(),
_emailWidget(),
_passwordWidget(),
_confirmPassWidget(),
SizedBox(height: height/25),
_signUpButtonWidget()
],
)),
],
),
),
),
),
),
);
}

Container _signUpButtonWidget() {
return Container(
padding: EdgeInsets.symmetric(vertical: height / 40, horizontal: width / 15),
width: double.infinity,
child: RaisedButton(
padding: EdgeInsets.all(12.0),
child: Text(
"Sign Up",
style: TextStyle(color: Colors.white, fontSize: 20.0),
),
color: Colors.blue,
onPressed: () {
setLoading(true);
_validateInputs();
},
),
);
}

BoxFeild _confirmPassWidget() {
return BoxFeild(
hintText: "Confirm Password",
lableText: "Confirm Password",
obscureText: true,
icon: Icons.lock_outline,
validator: validatePasswordMatching,

onSaved: (String val) {
_confirmPassoword = val;
},
);
}

BoxFeild _passwordWidget() {
return BoxFeild(
key: passKey,
hintText: "Enter Password",
lableText: "Password",
obscureText: true,
icon: Icons.lock_outline,
controller: _passwordController,
validator: validatePassword,
onSaved: (String val) {
_password = val;
},
);
}

BoxFeild _emailWidget() {
return BoxFeild(
hintText: "Enter Email",
lableText: "Email",
keyboardType: TextInputType.emailAddress,
icon: Icons.email,
validator: validateEmail,
onSaved: (String val) {
_email = val;
},
);
}

BoxFeild _nameWidget() {
return BoxFeild(
hintText: "Enter Name",
lableText: "Name",
icon: Icons.person,
validator: validateName,
onSaved: (String val) {
_name = val;
},
);
}

String validateName(String value) {
String patttern = r'(^[a-zA-Z ]*$)';
RegExp regExp = RegExp(patttern);
if (value.length == 0) {
return "Name is Required";
} else if (!regExp.hasMatch(value)) {
return "Name must be a-z and A-Z";
}
return null;
}

String validateEmail(String value) {
RegExp regExp = RegExp(Constants.PATTERN_EMAIL, caseSensitive: false);

if (value.length == 0) {
return "Email is Required";
} else if (!regExp.hasMatch(value)) {
return "Enter valid email address.";
}
return null;
}

String validatePassword(String value) {
if (value.length == 0) {
return "Password is Required";
} else if (value.length < 6) {
return "Password Should be more than 6.";
}
return null;
}


String validatePasswordMatching(String value) {
var password = passKey.currentState.value;

if (value.length == 0) {
return "Password is Required";
} else if (value != password) {
return 'Password is not matching';
}
return null;
}



void _validateInputs() {
if (_formKey.currentState.validate()) {
//If all data are correct then save data to out variables
//Make a REST Api Call with success Go to Login Page after User Created.

_formKey.currentState.save();
setLoading(true);

Utils.checkConnection().then((connectionResult) {
if (connectionResult) {
} else {
setLoading(false);
Utils.showAlert(context, "Flutter",
"Internet is not connected. Please check internet connection.",
() {
Navigator.pop(context);
}, true);
}
});


}




} else {
// If all data are not valid then start auto validation.
setState(() {
_autoValidate = true;
});
}
}
}

BoxFeild.dart


import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

class BoxFeild extends StatefulWidget {
final TextEditingController controller;
final FocusNode focusNode;
final TextInputType keyboardType;
final TextInputAction textInputAction;
final TextCapitalization textCapitalization;
final TextStyle style;
final TextAlign textAlign;
final bool autofocus;
final bool obscureText;
final bool autocorrect;
final int maxLines;
final Key key;
final int maxLength;
final bool maxLengthEnforced;
final ValueChanged<String> onChanged;
final VoidCallback onEditingComplete;
final ValueChanged<String> onSubmitted;
final List<TextInputFormatter> inputFormatters;
final bool enabled;
final IconData icon;
final String hintText;
final String lableText;
final double cursorWidth;
final Radius cursorRadius;
final Color cursorColor;
final Color defaultBorderColor;
final Brightness keyboardAppearance;
final EdgeInsets scrollPadding;
final FormFieldValidator<String> validator;
final ValueChanged<String> onFieldSubmitted;

final FormFieldSetter<String> onSaved;

const BoxFeild({
this.key,
this.controller,
this.focusNode,
TextInputType keyboardType,
this.textInputAction,
this.textCapitalization = TextCapitalization.none,
this.style,
this.icon,
this.textAlign = TextAlign.start,
this.autofocus = false,
this.obscureText = false,
this.autocorrect = true,
this.maxLines = 1,
this.maxLength,
this.onSaved,
this.hintText,
this.lableText,
this.maxLengthEnforced = true,
this.onChanged,
this.defaultBorderColor,
this.onEditingComplete,
this.onSubmitted,
this.inputFormatters,
this.enabled,
this.cursorWidth = 2.0,
this.cursorRadius,
this.cursorColor,
this.keyboardAppearance,
this.scrollPadding,
this.validator,
this.onFieldSubmitted,
}) : assert(textAlign != null),
assert(autofocus != null),
assert(obscureText != null),
assert(autocorrect != null),
assert(maxLengthEnforced != null),
assert(maxLines == null || maxLines > 0),
assert(maxLength == null || maxLength > 0),
keyboardType = keyboardType ??
(maxLines == 1 ? TextInputType.text : TextInputType.multiline);

@override
_BoxFeildState createState() => _BoxFeildState();
}

class _BoxFeildState extends State<BoxFeild> {
double width;
double height;
Color focusBorderColor = Colors.grey.shade400;
FocusNode _focusNode = FocusNode();
ValueChanged<Colors> focusColorChange;
@override
void dispose() {
super.dispose();
_focusNode.dispose();
}

@override
Widget build(BuildContext context) {
width = MediaQuery.of(context).size.width;
height = MediaQuery.of(context).size.height;

return Container(
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
SizedBox(
width: width / 30,
),
Expanded(
child: Container(
margin: EdgeInsets.only(top: height / 400, bottom: height / 400, left: width / 50, right: width / 50),
padding: EdgeInsets.all(height / 100),
alignment: Alignment.center,
height: height / 14,
decoration: BoxDecoration(
color: Colors.grey.shade100,
border: Border.all(color: focusBorderColor, width: 1.0),
borderRadius: BorderRadius.circular(8.0)),
child: TextFormField(
key: this.widget.key,
obscureText: this.widget.obscureText,
onSaved: this.widget.onSaved,
validator: this.widget.validator,
onFieldSubmitted: this.widget.onFieldSubmitted,
decoration: InputDecoration(
border: InputBorder.none,
prefixIcon: Icon(
this.widget.icon,
size: height/34,
),
hintText: this.widget.hintText),
),
)),
],
),
padding: EdgeInsets.only(bottom : height / 58),
margin: EdgeInsets.only(
top: height / 50, right: width / 20, left: width / 30),
);
}
}

现在,如果,我使用不同的容器作为密码字段,那么它就可以工作了。如果我将 key 和 Controller 传递给 boxfeild 那么它的显示

多个小部件使用相同的全局键
Container _passwordWidget() {
return Container(

padding: const EdgeInsets.all(16.0),
alignment: Alignment.center,
height: 52.0,
decoration: BoxDecoration(
color: Colors.grey.shade100,
border: Border.all(color: Colors.transparent, width: 0.0),
borderRadius: BorderRadius.circular(12.0)),
child: TextFormField(
key: passKey,
obscureText: true,
validator: validatePassword,
onSaved: (String val) {
_password = val;
},
keyboardType: TextInputType.number,
style: TextStyle(
fontSize: 22.0,
color: Colors.black,
),
decoration:
InputDecoration.collapsed(hintText: "Password"),
),
);

}

最佳答案

您以错误的方式声明密码,使用 final Globalkey 而不是 var

关于dart - 自动验证问题 : Password and Confirm Password validation with autovalidation in Flutter,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53703647/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com