<link rel="stylesheet" href="../../build/cssreset/reset-min.css" /> <link rel="stylesheet" href="../../build/cssfonts/fonts-min.css" /> <link rel="stylesheet" href="../../build/lazrjs/cssbase/base-min.css" /> <script type="text/javascript" src="../../build/yui/yui-min.js"></script> <script type="text/javascript" src="../../build/lazr-meta.js">lt;/script>
In order to facilitate ease of integration into existing web pages with differing needs in both layout and password strength requirements, the widget takes as construction parameters the ids of the password field to be evaluated, the id of the dom element that will hold the meter, and a reference to a javascript function that will be used to evaluate the strength of the password.
<label for="password">Password<label> <div> <input type="password" id="password" /> <div id="meter"><div> </div>
var strengthFunc = function(password) { //whatever logic you require to determine password strength return { "color": [an html color code like '#FF0000'], "text": [a description like "weak" or "strong"] }; };
var LAZR_YUI_CONFIG = { filter: "min", base: "../../build/", modules: LAZR_MODULES, insertBefore: "style-overrides", }; LP.use('node', 'event', 'lazr.passwordmeter', function(Y){ var passwordMeter = new Y.PasswordMeter({ input: '#password', contentBox: '#meter', func: strengthFunc, }); passwordMeter.render(); });