getFieldDecorator rules for password to contain lower case upper case letters and numbers?

Question

I am working on a react app and the views are built with Ant Design, I am validating a form and I don't know how to validate the password to contain chars of lower and upper case and numbers.

This is the field that I validated with Ant Design:

                            <FormItem>
                                {getFieldDecorator('password', {
                                    rules: [{required: true, message: 'Please input your password!'}, {
                                    validator: this.validateToNextPassword,}],
                                })(
                                    <StyledInput placeholder="Password" type="password"/>
                                )}
                            </FormItem>
                            <FormItem>
                                {getFieldDecorator('Re-enterPassword', {
                                    rules: [{required: true, message: 'Please confirm your password!',}, {
                                    validator: this.compareToFirstPassword,}],
                                })(
                                    <StyledInput placeholder="Re-enter password" type="password" onBlur={this.handleConfirmBlur}/>
                                )}
                            </FormItem>

This are the functions used to validate the passes:

handleConfirmBlur = (e) => {
            const value = e.target.value;
            this.setState({ confirmDirty: this.state.confirmDirty || !!value });
        }
        
        compareToFirstPassword = (rule, value, callback) => {
            debugger;
            const form = this.props.form;
            if (value && value !== form.getFieldValue('password')) {
                callback('Two passwords that you enter is inconsistent!');
            } else {
                callback();
            }
        }
        
        validateToNextPassword = (rule, value, callback) => {
            debugger;
            const form = this.props.form;
            if (value && this.state.confirmDirty) {
                form.validateFields(['confirm'], { force: true });
            }
            callback();
        }

This code validates the password field if it is empty or not and checks if the two passwords are similar but I need to validate the password to contain lower case chars upper case chars and numbers as well.

Answer 1

You can use regular expressions for that:

^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]+$

(?=.*[a-z]) - at least one small letter

(?=.*[A-Z]) - at least one capital

(?=.*\d) - at least one digit

[a-zA-Z\d]+ - only letters and digits allowed (defines the subset of allowed characters)

Answer 2

Validator in your code only compares two passwords. You should add another one validator to rules array (it can receive any number of validators)

rules: [{...yourValidator}, { message: 'Password should contain uppercase letter etc'}, validator: this.strongValidator]

and write strongValidator function:

strongValidator = (rule, value, callback) => {
  if(!value.match(digitsRegex) || !value.match(uppercaseRegex)) {
    return callback(true)
  }
  callback()
}

Also you can option validateFirst to stop validating on first error

Answer 3

we can use regex in a format, which contains at least a upper case,Lower case, symbol like (@$!%*#?&), min length and max length.

here is the regex for min length 8 and other validation:

(([a-z A-Z 1-9 @$!%*#?&])(?=.*[A-Z][a-z])(?=.*\d)(?=.*[@$!%*#?&])).{7,}

here is the regex for min length 8 ,max length 16 and other validation:

(([a-z A-Z 1-9 @$!%*#?&])(?=.*[A-Z][a-z])(?=.*\d)(?=.*[@$!%*#?&])).{7,15}