我正在顫抖，我需要在我的 TextFormField 中使用過濾器，如果沒有至少一個大寫或小寫字母或數字，則在紅色文本中顯示錯誤：“應該有一個數字”，對于例子。
這是我的表單（一部分，包含相關部分：textformfields 和 voidinitState()）：
class _RegisterState extends State<Register> {
bool showError = false;
bool isButtonActive = true;
String message = '';
String messagcell = '';
@override
void initState() {
super.initState();
correo.addListener(() {
final isButtonActive = correo.text.isNotEmpty;
setState(() => this.isButtonActive = isButtonActive);
});
celular.addListener(() {
final isButtonActive = correo.text.isNotEmpty;
setState(() => this.isButtonActive = isButtonActive);
});
passwd2.addListener(() {
setState(() {
showError = passwd2.text.isEmpty
? false
: passwd.text.trim() != passwd2.text.trim() ||
passwd2.text.length < 8;
});
final isButtonActive = correo.text.isNotEmpty;
setState(() => this.isButtonActive = isButtonActive);
});
passwd.addListener(() {
setState(() {
showError = passwd.text.isEmpty
? false
: passwd.text.trim() != passwd2.text.trim() ||
passwd.text.length < 8;
});
final isButtonActive = correo.text.isNotEmpty;
setState(() => this.isButtonActive = isButtonActive);
});
}
void validateEmail(String enteredEmail) {
if (EmailValidator.validate(enteredEmail)) {
setState(() {
message = '';
});
} else {
setState(() {
message = ('Por favor ingrese un correo válido');
});
}
}
void validateCell(String enteredCell) {
if (enteredCell.length >= 9 && enteredCell.length <= 15) {
setState(() {
messagcell = '';
});
} else if (enteredCell.length < 9) {
setState(() {
messagcell = ('Por favor ingrese un número válido');
});
}
}
TextEditingController correo = TextEditingController();
TextEditingController celular = TextEditingController();
TextEditingController passwd = TextEditingController();
TextEditingController passwd2 = TextEditingController();
@override
void dispose() {
correo.dispose();
passwd.dispose();
celular.dispose();
passwd2.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
height: 900,
child: Card(
color: Colors.blue[200],
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
'Register',
style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: TextFormField(
inputFormatters: <TextInputFormatter>[
FilteringTextInputFormatter.allow(
RegExp("[-@._0-9a-zA-Z]")),
new LengthLimitingTextInputFormatter(36),
],
decoration: InputDecoration(
labelText: 'Correo',
prefixIcon: Icon(Icons.mail),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
borderSide: BorderSide(color: Colors.blue, width: 2.0),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
borderSide:
BorderSide(color: Colors.blue[900], width: 2.0),
)),
onChanged: (enteredEmail) => validateEmail(enteredEmail),
controller: correo,
),
),
Text(
message,
style: TextStyle(color: Colors.red),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: TextFormField(
// maxLength: 12,
inputFormatters: <TextInputFormatter>[
FilteringTextInputFormatter.digitsOnly,
new LengthLimitingTextInputFormatter(15),
],
keyboardType: TextInputType.number,
validator: (value) {
final intNumber = int.tryParse(value);
if (intNumber != null && intNumber <= 9) {
return null;
}
return 'Ingrese un número válido';
},
decoration: InputDecoration(
labelText: 'Celular',
prefixIcon: Icon(Icons.person),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
borderSide: BorderSide(color: Colors.blue, width: 2.0),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
borderSide:
BorderSide(color: Colors.blue[900], width: 2.0),
),
),
onChanged: (enteredCell) => validateCell(enteredCell),
controller: celular,
textInputAction: TextInputAction.done,
),
),
Text(
messagcell,
style: TextStyle(color: Colors.red),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: TextFormField(
obscureText: true,
inputFormatters: <TextInputFormatter>[
FilteringTextInputFormatter.allow(RegExp("[-0-9a-zA-Z]")),
new LengthLimitingTextInputFormatter(16),
],
decoration: InputDecoration(
labelText: 'Contrase?a',
prefixIcon: Icon(Icons.lock),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
borderSide: BorderSide(color: Colors.blue, width: 2.0),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
borderSide:
BorderSide(color: Colors.blue[900], width: 2.0),
),
),
controller: passwd,
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: TextFormField(
obscureText: true,
inputFormatters: <TextInputFormatter>[
FilteringTextInputFormatter.allow(RegExp("[-0-9a-zA-Z]")),
new LengthLimitingTextInputFormatter(16),
],
decoration: InputDecoration(
labelText: 'Repita contrase?a',
prefixIcon: Icon(Icons.lock),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
borderSide: BorderSide(color: Colors.blue, width: 2.0),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
borderSide:
BorderSide(color: Colors.blue[900], width: 2.0),
),
),
controller: passwd2,
),
),
if (showError)
const Text(
"Las contrase?as no son válidas",
style: TextStyle(color: Colors.red),
),
Row(
children: <Widget>[
Expanded(
child: ElevatedButton(
style: ElevatedButton.styleFrom(
onSurface: Colors.blue,
),
child: Text('Register',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.white)),
onPressed: () => [
if (isButtonActive)
{
setState(() => isButtonActive = false),
}
else
{null},
register(), //REGISTER FUNCTION
setState(() {})
],
),
),
//LOGIN BUTTON
Expanded(
child: ElevatedButton(
// color: Colors.amber[100],
child: Text('Login',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.black)),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => MyHomePage(),
),
);
},
),
),
],
)
],
),
),
),
);
}
}
在我的 TextFormFields 中有 inputFormatters，例如：
inputFormatters: <TextInputFormatter>[
FilteringTextInputFormatter.allow(
RegExp("[-@._0-9a-zA-Z]")),
new LengthLimitingTextInputFormatter(36),
],
我需要一個函式來實時檢測任何大寫、小寫或數字字符的缺失。不知道怎么弄 請幫幫我，謝謝。
uj5u.com熱心網友回復：
您可以在validator上使用引數TextFormField。您TextFormField需要在一個Form小部件內才能使其作業。通過一鍵你的Form小部件和呼叫formKey.currentState?.validate()在onChanged您的回呼TextFormField。
試試下面的這段代碼：
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.light(),
home: const Scaffold(
body: Center(
child: CustomForm(),
),
),
);
}
}
class CustomForm extends StatefulWidget {
const CustomForm({Key? key}) : super(key: key);
@override
_CustomFormState createState() => _CustomFormState();
}
class _CustomFormState extends State<CustomForm> {
final formKey = GlobalKey<FormState>();
@override
Widget build(BuildContext context) {
return Form(
key: formKey,
child: Padding(
padding: const EdgeInsets.all(50),
child: TextFormField(
onChanged: (v) => formKey.currentState?.validate(),
validator: (v) {
String? message;
if (!RegExp(".*[0-9].*").hasMatch(v ?? '')) {
message ??= '';
message = 'Input should contain a numeric value 1-9. ';
}
if (!RegExp('.*[a-z].*').hasMatch(v ?? '')) {
message ??= '';
message = 'Input should contain a lowercase letter a-z. ';
}
if (!RegExp('.*[A-Z].*').hasMatch(v ?? '')) {
message ??= '';
message = 'Input should contain an uppercase letter A-Z. ';
}
return message;
},
),
),
);
}
}
編輯：TextFormField如果您只想驗證該特定欄位，您也可以直接在 上使用密鑰。
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.light(),
home: const Scaffold(
body: Center(
child: CustomForm(),
),
),
);
}
}
class CustomForm extends StatefulWidget {
const CustomForm({Key? key}) : super(key: key);
@override
_CustomFormState createState() => _CustomFormState();
}
class _CustomFormState extends State<CustomForm> {
final formKey = GlobalKey<FormState>();
final passwordFieldKey = GlobalKey<FormFieldState>();
@override
Widget build(BuildContext context) {
return Form(
key: formKey,
child: Padding(
padding: const EdgeInsets.all(50),
child: TextFormField(
key: passwordFieldKey,
onChanged: (v) => passwordFieldKey.currentState?.validate(),
validator: (v) {
String? message;
if (!RegExp(".*[0-9].*").hasMatch(v ?? '')) {
message ??= '';
message = 'Input should contain a numeric value 1-9. ';
}
if (!RegExp('.*[a-z].*').hasMatch(v ?? '')) {
message ??= '';
message = 'Input should contain a lowercase letter a-z. ';
}
if (!RegExp('.*[A-Z].*').hasMatch(v ?? '')) {
message ??= '';
message = 'Input should contain an uppercase letter A-Z. ';
}
return message;
},
),
),
);
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/400073.html