Changeset 5836
- Timestamp:
- 08/20/08 12:12:12 (11 months ago)
- Location:
- trunk/plugins/validate.password
- Files:
-
- 1 added
- 4 modified
-
demo/index.html (modified) (5 diffs)
-
jquery.validate.password.css (added)
-
jquery.validate.password.js (modified) (2 diffs)
-
test/index.html (modified) (2 diffs)
-
test/strength-meter.js (modified) (4 diffs)
Legend:
- Unmodified
- Added
- Removed
-
trunk/plugins/validate.password/demo/index.html
r5832 r5836 6 6 7 7 <link rel="stylesheet" type="text/css" media="screen" href="milk.css" /> 8 <link rel="stylesheet" type="text/css" media="screen" href="../jquery.validate.password.css" /> 8 9 9 10 <script type="text/javascript" src="../../validate/lib/jquery.js"></script> 10 11 <script type="text/javascript" src="../../validate/jquery.validate.js"></script> 11 12 <script type="text/javascript" src="../jquery.validate.password.js"></script> 12 13 <style type="text/css">14 .password-meter {15 position:relative;16 top: 20px;17 background: #e0e0e0;18 width: 180px;19 }20 .password-meter-bar {21 height: 4px;22 }23 .password-meter-weak {24 background: red;25 width: 20px;26 }27 .password-meter-good {28 background: blue;29 width: 140px;30 }31 .password-meter-strong {32 background: green;33 width: 180px;34 }35 36 </style>37 13 38 14 <script id="demo" type="text/javascript"> … … 46 22 }, 47 23 password: { 48 required: true, 49 password: true 24 password: "#username" 50 25 }, 51 26 password_confirm: { … … 59 34 minlength: jQuery.format("Enter at least {0} characters") 60 35 }, 61 password: {62 required: "Provide a password",63 rangelength: jQuery.format("Enter at least {0} characters")64 },65 36 password_confirm: { 66 37 required: "Repeat your password", … … 71 42 // the errorPlacement has to take the table layout into account 72 43 errorPlacement: function(error, element) { 73 error. appendTo( element.parent().next() );44 error.prependTo( element.parent().next() ); 74 45 }, 75 46 // specifying a submitHandler prevents the default submit, good for the demo … … 130 101 <td class="status"> 131 102 <div class="password-meter"> 132 <div class="password-meter-bar"></div> 103 <div class="password-meter-message"> </div> 104 <div class="password-meter-bg"> 105 <div class="password-meter-bar"></div> 106 </div> 133 107 </div> 134 108 </td> -
trunk/plugins/validate.password/jquery.validate.password.js
r5832 r5836 41 41 42 42 $.validator.passwordRating.messages = { 43 "similar-to-username": "Too similar to username", 43 44 "too-short": "Too short", 44 "very-weak": " Weak",45 "weak": " Fair",45 "very-weak": "Very weak", 46 "weak": "Weak", 46 47 "good": "Good", 47 48 "strong": "Strong" … … 56 57 var rating = $.validator.passwordRating(password, username.val()); 57 58 // update message for this field 58 $.extend(this.settings.messages[element.name] || (this.settings.messages[element.name] = {}), { 59 password: $.validator.passwordRating.messages[rating.messageKey] 60 }) 61 $(".password-meter-bar").removeClass().addClass("password-meter-bar").addClass("password-meter-" + rating.messageKey); 59 60 var meter = $(".password-meter", element.form); 61 62 meter.find(".password-meter-bar").removeClass().addClass("password-meter-bar").addClass("password-meter-" + rating.messageKey); 63 meter.find(".password-meter-message") 64 .removeClass() 65 .addClass("password-meter-message") 66 .addClass("password-meter-message-" + rating.messageKey) 67 .text($.validator.passwordRating.messages[rating.messageKey]); 62 68 // display process bar instead of error message 63 69 64 70 return rating.rate > 2; 65 }, " ");71 }, " "); 66 72 // manually add class rule, to make username param optional 67 73 $.validator.classRuleSettings.password = { password: true }; -
trunk/plugins/validate.password/test/index.html
r5834 r5836 4 4 <link rel="Stylesheet" media="screen" href="qunit/testsuite.css" /> 5 5 <script type="text/javascript" src="../../validate/lib/jquery.js"></script> 6 <script type="text/javascript" src="../lib/ui.core.js"></script>7 <script type="text/javascript" src="../lib/ui.progressbar.js"></script>8 6 <script type="text/javascript" src="qunit/testrunner.js"></script> 9 7 <script type="text/javascript" src="../../validate/jquery.validate.js"></script> … … 24 22 <form id="form"> 25 23 <input id="username" name="username" value="Peter" /> 26 <input class="required password" name="password" id="password" /> 24 <input class="password" name="password" id="password" /> 25 <div class="password-meter"> 26 <div class="password-meter-message"> </div> 27 <div class="password-meter-bg"> 28 <div class="password-meter-bar"></div> 29 </div> 30 </div> 27 31 </form> 28 32 </div> -
trunk/plugins/validate.password/test/strength-meter.js
r5834 r5836 6 6 function check(messageKey) { 7 7 input.valid(); 8 if (!messageKey) { 9 equals( input.next(":visible").text(), $.validator.messages.required ); 10 } else { 11 equals( input.next(":visible").text(), messages[messageKey] ); 12 } 8 equals( $("#form .password-meter-message").text(), messages[messageKey] ); 13 9 } 14 10 … … 18 14 19 15 input = $("#password"); 20 check( );16 check("too-short"); 21 17 22 18 input.val("a"); 23 19 check("too-short"); 24 25 input.val("");26 check();27 20 28 21 input.val("abc123@po"); … … 37 30 rules: { 38 31 password: { 39 required: true,40 32 password: "#username" 41 33 } … … 43 35 }); 44 36 45 check( );37 check("too-short"); 46 38 47 39 input.val("peterpeter");