如何在bootstrapValidator中添加含大小写及数字的自定义密码验证约束

Hey there! To add the required custom constraint (password must include at least one lowercase letter, one uppercase letter, and one number) to your form, you have two straightforward options using BootstrapValidator: using the built-in regexp validator for a single combined error message, or creating a custom validator for more granular, specific error feedback. Let's break both down:

Option 1: Use the Built-in Regexp Validator #

This is the simplest approach if you want a single error message when any of the requirements aren't met. Update your Password field validators to include the regexp rule with a regular expression that enforces all three conditions:

Modified JavaScript Code #

$('#userForm').bootstrapValidator({
    message: 'This value is not valid',
    feedbackIcons: {
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
    },
    submitHandler: function (validator, form, submitButton) {
    },
    fields: {
        FName: {
            validators: {
                notEmpty: {
                    message: 'Required!'
                }
            }
        },
        LName: {
            validators: {
                notEmpty: {
                    message: 'Required!'
                }
            }
        },
        UserName: {
            validators: {
                notEmpty: {
                    message: 'Required!'
                },
                stringLength: {
                    min: 3,
                    max: 25,
                    message: 'Length should be between 3 to 25.'
                }
            }
        },
        Password: {
            validators: {
                notEmpty: {
                    message: 'Required!'
                },
                stringLength: {
                    min: 8,
                    max: 15,
                    message: 'Length should be between 8 to 15.'
                },
                // New regexp validator added here
                regexp: {
                    regexp: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).+$/,
                    message: 'Password must contain at least one lowercase letter, one uppercase letter, and one number.'
                }
            }
        }
    }
});

Regex Breakdown #

• (?=.*[a-z]): Positive lookahead to ensure at least one lowercase letter exists
• (?=.*[A-Z]): Positive lookahead to ensure at least one uppercase letter exists
• (?=.*\d): Positive lookahead to ensure at least one number exists
• .+: Matches any character (after satisfying the lookaheads) to complete the password

Option 2: Custom Validator for Granular Error Messages #

If you want to give users specific feedback (e.g., "Missing a lowercase letter" instead of a generic message), use a custom validator. This checks each condition individually and returns a tailored error message:

Modified JavaScript Code #

$('#userForm').bootstrapValidator({
    message: 'This value is not valid',
    feedbackIcons: {
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
    },
    submitHandler: function (validator, form, submitButton) {
    },
    fields: {
        FName: {
            validators: {
                notEmpty: {
                    message: 'Required!'
                }
            }
        },
        LName: {
            validators: {
                notEmpty: {
                    message: 'Required!'
                }
            }
        },
        UserName: {
            validators: {
                notEmpty: {
                    message: 'Required!'
                },
                stringLength: {
                    min: 3,
                    max: 25,
                    message: 'Length should be between 3 to 25.'
                }
            }
        },
        Password: {
            validators: {
                notEmpty: {
                    message: 'Required!'
                },
                stringLength: {
                    min: 8,
                    max: 15,
                    message: 'Length should be between 8 to 15.'
                },
                // Custom validator added here
                custom: {
                    validator: function(value, validator) {
                        // Check for lowercase letter
                        if (!/[a-z]/.test(value)) {
                            return {
                                valid: false,
                                message: 'Password must contain at least one lowercase letter.'
                            };
                        }
                        // Check for uppercase letter
                        if (!/[A-Z]/.test(value)) {
                            return {
                                valid: false,
                                message: 'Password must contain at least one uppercase letter.'
                            };
                        }
                        // Check for number
                        if (!/\d/.test(value)) {
                            return {
                                valid: false,
                                message: 'Password must contain at least one number.'
                            };
                        }
                        // All conditions satisfied
                        return true;
                    }
                }
            }
        }
    }
});

How This Works #

The custom validator function runs three separate checks on the password value. If any check fails, it returns an object with valid: false and a specific error message. If all checks pass, it returns true to indicate the password is valid.

Either approach will enforce your required password constraints. The regexp method is quicker for a generic message, while the custom validator offers better user experience with targeted feedback.

内容的提问来源于stack exchange，提问作者mjyazdani