我如何在编写电子邮件并使用 flutter 从中进行验证时放置（真实图标）

Question

如何在输入电子邮件时放置图标以通过电子邮件正则表达式和密码强度进行验证？

TextFormField(
                    controller: _emailController,
                    textAlign: TextAlign.end,
                    decoration: InputDecoration(
                        hintStyle: TextStyle(fontSize: 16),
                        hintText: "example@gmail.com",
                        fillColor: Colors.grey[200],
                        filled: true,
                        border: OutlineInputBorder(
                            borderSide: BorderSide(
                              width: 0,
                              style: BorderStyle.none,
                            ),
                            borderRadius: BorderRadius.circular(14))),
                    onSaved: (String value) {
                      email = value;
                    },
                    validator: _validateEmail,
                    keyboardType: TextInputType.emailAddress,
                  ),
                    Padding(
                    padding: const EdgeInsets.fromLTRB(0, 0, 20, 0),
                    child: Text(
                      "كلمة المرور",
                      textAlign: TextAlign.right,
                      style: TextStyle(
                          fontWeight: FontWeight.bold, fontSize: 16),
                    ),
                  ),
                  new TextFormField(
                    controller: _passwordController,
                    textAlign: TextAlign.end,
                    keyboardType: TextInputType.visiblePassword,
                    decoration: InputDecoration(
                        prefixIcon: new GestureDetector(
                            onTap: () {
                              setState(() {
                                _obscureText = !_obscureText;
                              });
                            },
                            child: Padding(
                              padding:
                                  const EdgeInsets.fromLTRB(20, 10, 0, 0),
                              child: Icon(
                                  _obscureText
                                      ? Icons.visibility
                                      : Icons.visibility_off,
                                  color: visi),
                            )),
                        hintStyle: TextStyle(fontSize: 16),
                        hintText: "",
                        fillColor: Colors.grey[200],
                        filled: true,
                        border: OutlineInputBorder(
                            borderSide: BorderSide(
                              width: 0,
                              style: BorderStyle.none,
                            ),
                            borderRadius: BorderRadius.circular(14))),
                    onSaved: (String value) {
                      password = value;
                    },
                    validator: _validatePassword,
                    obscureText: !_obscureText,
                  ),

Answer 1

对于电子邮件，您可以向 _emailController 添加一个监听器，例如：

var _myIcon = Icon.cancel;

 void initState() {
  super.initState();

 // Start listening to changes.
  _emailController.addListener(_checkEmail);
}

然后：

_checkEmail() {

   bool emailValid = RegExp(r"^[a-zA-Z0-9.a-zA-Z0-9.!#$%&'*+-/=?^_`{|}~]+@[a-zA-Z0-9]+\.[a-zA-Z]+").hasMatch(_emailController.text);

   if(emailValid)
       setState(() {
           _myIcon=Icons.ok;
        });
}

现在向您的电子邮件字段添加一个 prefixIcon 值 _myIcon。

密码为：

最少 1 个大写
最少 1 个小写字母
最少 1 个数字
至少 1 个特殊字符
通用允许字符 (!@#$ & * ~)

并且基于的答案，您可以使用这样的正则表达式：

 RegExp(r'^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[!@#$&*~]).{8,}$').hasMatch(_passwordController.text);

我如何在编写电子邮件并使用 flutter 从中进行验证时放置（真实图标）

How i can put (true icon) while i writing email and verifying from it with flutter

dart

flutter

flutter-dependencies

flutter-layout

flutter-animation