如何在 Flutter 中处理密码中的 TextField 验证

Question

I created a login page and I need to add these things to my password. How do I do it with validation alert message?

• Minimum 1 Upper case
• Minimum 1 lowercase
• Minimum 1 Numeric Number
• Minimum 1 Special Character
• Common Allow Character ( ! @ # $ & * ~ )

Answer 1

Your regular expression should look like:

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

Here is an explanation:

r'^
  (?=.*[A-Z])       // should contain at least one upper case
  (?=.*[a-z])       // should contain at least one lower case
  (?=.*?[0-9])      // should contain at least one digit
  (?=.*?[!@#\$&*~]) // should contain at least one Special character
  .{8,}             // Must be at least 8 characters in length  
$

Match above expression with your password string. Using this method-

    String? validatePassword(String value) {
    RegExp regex =
        RegExp(r'^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[!@#\$&*~]).{8,}$');
    if (value.isEmpty) {
      return 'Please enter password';
    } else {
      if (!regex.hasMatch(value)) {
        return 'Enter valid password';
      } else {
        return null;
      }
    }
  }

Answer 2

You need to use Regular Expression to validate the structure.

 bool validateStructure(String value){
        String  pattern = r'^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[!@#\$&*~]).{8,}$';
        RegExp regExp = new RegExp(pattern);
        return regExp.hasMatch(value);
  }

output: 

    Vignesh123! : true
    vignesh123 : false
    VIGNESH123! : false
    vignesh@ : false
    12345678? : false

This function will validate the passed value is having the structure or not.

    var _usernameController = TextEditingController();
    String _usernameError;

    ...

    @override
    Widget build(BuildContext context) {
        return
        ...
        TextFormField(
          controller: _usernameController,
          decoration: InputDecoration(
              hintText: "Username", errorText: _usernameError),
          style: TextStyle(fontSize: 18.0),
        ),
        Container(
          width: double.infinity,
          height: 50.0,
          child: RaisedButton(
            onPressed: validate,
            child: Text(
              "Login",
              style: TextStyle(color: Colors.white),
            ),
            color: Theme.of(context).primaryColor,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(50.0),
            ),
          ),
        ),
        ...
    }

    ...

    validate(){
        if(!validateStructure(_usernameController.text)){
            setState(() {
                _usernameError = emailError;
                _passwordError = passwordError;
            });
            // show dialog/snackbar to get user attention.
            return;
        }
        // Continue 
    }

Answer 3

You have to use TextFormField widget with validator property.

TextFormField(
   validator: (value) {
      // add your custom validation here.
      if (value.isEmpty) {
        return 'Please enter some text';
      }
      if (value.length < 3) {
        return 'Must be more than 2 charater';
      }
   },
),

Take a look on official docs: https://flutter.dev/docs/cookbook/forms/validation

Answer 4

You can achieve this using below flutter plugin.

wc_form_validators

You can use it something like this:

          TextFormField(
            decoration: InputDecoration(
              labelText: 'Password',
            ),
            validator: Validators.compose([
              Validators.required('Password is required'),
              Validators.patternString(r'^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[!@#\$&*~]).{8,}$', 'Invalid Password')
            ]),
          ),

Its documentation is really good. You can read it for more util functions like this.

Answer 5

here is the complete answer

Write a Dart program to check whether a string is a valid password. a. A password must have at least ten characters. b. A password consists of only letters and digits. c. A password must contain at least two digits.

import 'dart:io';

main() {
  var password;
  stdout.write("Enter You'r Password: ");
  password=stdin.readLineSync();

   if(password.length>=10 && !password.contains(RegExp(r'\W')) && RegExp(r'\d+\w*\d+').hasMatch(password))
   {
     print(" \n\t$password is Valid Password");
   }
   else
   {
     print("\n\t$password is Invalid Password");

   }

Answer 6

this is the best regx

bool passValid = RegExp("^(?=.{8,32}\$)(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*[!@#\$%^&*(),.?:{}|<>]).*").hasMatch(value);
 
if (value.isEmpty ||!passValid) 
 {
 return 'error';
 }

Answer 7

By using extension in dart

extension PasswordValidator on String {
  bool isValidPassword() {
  return RegExp(
        r'^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[!@#\$&*~]).{8,}$')
    .hasMatch(this);
  }
}

You can apply this in your textfield like

TextFormField(
  autovalidate: true,
  validator: (input) => input. isValidPassword() ? null : "Check your password...",
)

Answer 8

Flutter Login Validation

  ///creating Username and Password Controller.
  TextEditingController username=TextEditingController();
TextEditingController password=TextEditingController();
  Form(
    child: Builder(
      builder: (context) {
        return Column(
          children: [
            TextFormField(
              controller: username,
              validator: (CurrentValue){
                var nonNullValue=CurrentValue??'';
                if(nonNullValue.isEmpty){
                  return ("username is required");
                }
                if(!nonNullValue.contains("@")){
                  return ("username should contains @");
                }
                return null;
              },
            ),
            TextFormField(
              controller: password,
              validator: (PassCurrentValue){
                RegExp regex=RegExp(r'^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[!@#\$&*~]).{8,}$');
                var passNonNullValue=PassCurrentValue??"";
                if(passNonNullValue.isEmpty){
                  return ("Password is required");
                }
                else if(passNonNullValue.length<6){
                  return ("Password Must be more than 5 characters");
                }
                else if(!regex.hasMatch(passNonNullValue)){
                  return ("Password should contain upper,lower,digit and Special character ");
                }
                return null;
              },
            ),
            ElevatedButton(onPressed: (){
              if(Form.of(context)?.validate()?? false){
           Navigator.of(context).push(MaterialPageRoute(builder: (_)=>loginpage()));
              }
            }, child: Text("Login"))
          ],
        );
      }
    ),
  )

in this picture you can see when you Enter inValid username and password it will not Navigate to another page.

when you Enter Valid Username and Password it will Navigate to another Page.