大佬教程收集整理的这篇文章主要介绍了如何基于验证器动态更改 textformfield 中错误样式的颜色？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我有一个 TextFormFIEld，它使用验证器检查输入是否满足一组要求。如果输入不符合特定要求，红色 中的错误文本将相应地通知用户。如果密码满足所有要求，我想以绿色（“安全密码”）返回文本。
class RegForm extends StatefulWidget {
const RegForm({Key? key}) : super(key: key);
@overrIDe
_RegFormState createState() => _RegFormState();
}
class _RegFormState extends State<RegForm> {
color errorClr = colors.red;
final String checkAll =
r'^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[!@#\$&*~]).{8,}$';
final String checkLetters = r'^(?=.*?[A-Z])(?=.*?[a-z])';
final String checkNumbers = r'^(?=.*?[0-9])';
@overrIDe
Widget build(BuildContext context) {
return Scaffold(
body: TextFormFIEld(
autovalIDateMode: AutovalIDateMode.onUserInteraction,valIDator: (value) {
if (value == null || value.isEmpty) {
return 'Please enter a valID password';
} else {
if (value.length < 8)
return 'Password has to be 8 characters or more!';
else if (!RegExp(checkLetters).hasMatch(value))
return 'Password has to contain Uppercase and Lowercase letters!';
else if (!RegExp(checkNumbers).hasMatch(value))
return 'Password has to contain numbers!';
else if (RegExp(checkAll).hasMatch(value)) {
errorClr = colors.green;
return 'Very secure password!';
}
}
errorClr = colors.green;
return 'Secure password!';
},decoration: inputdecoration(
errorStyle: TextStyle(
color: errorClr,),contentpadding: EdgeInsets.fromLTRB(20.0,15.0,20.0,15.0),hintText:
'Password must be at least 8 characters long,contains numbers and both upper and lowercase letters',border: Outlineinputborder(
borderRadius: borderRadius.circular(10.0),);
}
}
上面的代码不会返回绿色的“安全密码”文本，我认为这是因为验证器不会重建小部件，因此 errorStyle 不会更新。有没有办法让这个工作？
您不能从验证器函数中调用 setState()，这是更改 errorClr 或成功文本所需要的。此外，验证器函数需要返回 null 以指示验证通过；所以你不能简单地返回安全密码！。
您如何看待使用 helperText 输出成功消息。
如果非空，则文本显示在 InputDecorator.child 下方，与 errorText 位于同一位置。如果指定了非空的 errorText 值，则不会显示帮助文本。
定义一个新变量来指示密码是否有效（默认：false）：
bool validPassword = false;
使用 onChanged 检查密码是否有效：
onChanged: (String value) {
if (RegExp(checkAll).hasMatch(value))
setState(() {
validPassword = true;
});
},将 helperText 和 helperStyle 添加到您的 InputDecoration：
helperText: validPassword ? 'Secure Password' : null,helperStyle: TextStyle(color: Colors.green),完整示例：
class _RegFormState extends State<RegForm> {
final String checkAll = r'^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[!@#\$&*~]).{8,}$';
final String checkSpecial = r'^(?=.*?[!@#\$&*~])';
final String checkLetters = r'^(?=.*?[A-Z])(?=.*?[a-z])';
final String checkNumbers = r'^(?=.*?[0-9])';
bool validPassword = false;
@override
Widget build(BuildContext context) {
return Scaffold(
body: TextFormField(
autovalidateMode: AutovalidateMode.onUserInteraction,validator: (value) {
if (value == null || value.isEmpty || value.trim().length < 8) // use trim() for the whitrespaces
return 'Password has to be 8 characters or more!';
if (!RegExp(checkLetters).hasMatch(value))
return 'Password has to contain Uppercase and Lowercase letters!';
if (!RegExp(checkNumbers).hasMatch(value))
return 'Password has to contain numbers!';
if (!RegExp(checkSpecial).hasMatch(value))
return 'Password has to contain a special character!';
return null; // to indicate a success
},onChanged: (String value) {
if (RegExp(checkAll).hasMatch(value))
setState(() {
validPassword = true;
});
},decoration: InputDecoration(
contentPadding: EdgeInsets.fromLTRB(20.0,15.0,20.0,15.0),helperText: validPassword ? 'Secure Password' : null,hintText:
'Password must be at least 8 characters long,contains numbers and both upper and lowercase letters',border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10.0),),);
}
以上是大佬教程为你收集整理的如何基于验证器动态更改 textformfield 中错误样式的颜色？全部内容，希望文章能够帮你解决如何基于验证器动态更改 textformfield 中错误样式的颜色？所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。