jQuery Password Validation
The jQuery Password Validation plug-in extends the jQuery Validate plug-in and provides two components:
A function to evaluate password-related factors: such as the mix of uppercase and lowercase letters, the mix of characters (numbers, special characters), length, similarity to the username (optional).
A custom method for verification plug-in that uses the evaluation function to display password strength. The displayed text can be localized.
You can easily customize the appearance of the intensity display, localize the message display, and integrate it into existing forms.
The current version of this plug-in is 1.0.0.
Usage
If you need to use the Password Validation plug-in, please add a class "password" to the input, and add a basic mark that shows intensity where it needs to be displayed in the form:
<form id="register"> <label for="password">Password:</label> <input class="password" name="password" id="password" /> <div class="password-meter"> <div class="password-meter-message"> </div> <div class="password-meter-bg"> <div class="password-meter-bar"></div> </div> </div></form>
Apply the Validate plug-in to the form:
$(document).ready(function() {
$("#register").validate();});
You can overload $.validator.passwordRating to implement different evaluation methods. Or override $.validator.passwordRating.messages to provide other messages, such as localization.
Example
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Makes "field" required to be the same as #other</title>
<link rel="stylesheet" href="http://jqueryvalidation.org/files/demo/site-demos.css">
</head>
<body>
<form id="myform">
<label for="password">Password</label>
<input id="password" name="password" />
<br/>
<label for="password_again">Again</label>
<input class="left" id="password_again" name="password_again" />
<br>
<input type="submit" value="Validate!">
</form>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://jqueryvalidation.org/files/dist/jquery.validate.min.js"></script>
<script src="http://jqueryvalidation.org/files/dist/additional-methods.min.js"></script>
<script>
// just for the demos, avoids form submit
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
$( "#myform" ).validate({
rules: {
password: "required",
password_again: {
equalTo: "#password"
}
}
});
</script>
</body>
</html>Run the program and try it
