Approximate style:
Imitation Website: http://bbs.jquery.org.cn/register.php
Source code:
// ==============================HTML page========================
<Body onload = "initcss ();"> <form> <div> <Table> <tr> <TD> password: </TD> <input id = "txtpassword" type = "password" style = "width: 130px;" maxlength = "16" onfocus = "initcss (); "onblur =" validateinput ('Password', this. value) "onkeydown =" validatepwdstrong (this. value ); "/> </TD> <Div id =" tipposition "> </div> </TD> </tr> <TD> </TD> <TD> <Table id = "pwdstrong_color"> <tr> <TD id = "pwdstrong_1"> </TD> <TD id = "pwdstrong_2"> </TD> <TD id = "pwdstrong_3"> </TD> <TD id = "pwdstrong_4"> </TD> </tr> </table> </TD> <Div ID = "pwdstrong_text"> </div> </TD> </tr> </table> </div> </form> </body>
// ========================== JS file ================================
// Replace document with $. getelementbyid function var $ = function (v) {return document. getelementbyid (V );} /*************************************** ********************** * *****************************/function validateinput (element, value) {// verify the password if (element = "password") {If (value. tostring (). length <6) {$ ('tidposition '). classname = 'error'; $ ('tidposition '). innerhtml = "Incorrect password settings. The password length is too small. "; Return;} else {$ ('tidposition'). classname = 'success'; $ ('tidposition'). innerhtml =" is entered correctly. ";}}} /* = ========= Begin ========================================= =========* // password initialization Style Function initcss () {$ ('tidposition '). classname = 'tip '; $ ('tidposition '). innerhtml = "minimum length: 6. Maximum length: 16. ";} /* ====================================== Password strength ====== ========= begin =========================================== ======= */function evaluate (word) {return word. replace (/^ (? :( [A-Z]) | ([A-Z]) | ([0-9]) | (.)) {5 ,}| (.) + $/g, "$1 $2 $3 $4 $5 "). length;} function validatepwdstrong (value) {var Pwd = {color: ['# e6eaed',' # ac0035 ',' # ffcc33', '# 639bcc ', '#246626'], text: ['too short', 'weak ', 'average', 'good ', 'excellent']}; function colorinit () {$ ('pwdstrong _ 1 '). style. backgroundcolor = PWD. color [0]; $ ('pwdstrong _ 2 '). style. backgroundcolor = PWD. color [0]; $ ('pwdstrong _ 3 '). style. backgroundcolor = PWD. color [0]; $ ('pwdstrong _ 4 '). style. backgroundcolor = PWD. color [0];} If (evaluate (value) = 1) {colorinit (); $ ('pwdstrong _ 1 '). style. backgroundcolor = PWD. color [1]; $ ('pwdstrong _ text '). innerhtml = PWD. text [1]; $ ('pwdstrong _ text '). style. color = PWD. color [1];} else if (evaluate (value) = 2) {colorinit (); $ ('pwdstrong _ 1 '). style. backgroundcolor = PWD. color [2]; $ ('pwdstrong _ 2 '). style. backgroundcolor = PWD. color [2]; $ ('pwdstrong _ text '). innerhtml = PWD. text [2]; $ ('pwdstrong _ text '). style. color = PWD. color [2];} else if (evaluate (value) = 3) {colorinit (); $ ('pwdstrong _ 1 '). style. backgroundcolor = PWD. color [3]; $ ('pwdstrong _ 2 '). style. backgroundcolor = PWD. color [3]; $ ('pwdstrong _ 3 '). style. backgroundcolor = PWD. color [3]; $ ('pwdstrong _ text '). innerhtml = PWD. text [3]; $ ('pwdstrong _ text '). style. color = PWD. color [3];} else if (evaluate (value) = 4) {$ ('pwdstrong _ 1 '). style. backgroundcolor = PWD. color [4]; $ ('pwdstrong _ 2 '). style. backgroundcolor = PWD. color [4]; $ ('pwdstrong _ 3 '). style. backgroundcolor = PWD. color [4]; $ ('pwdstrong _ 4 '). style. backgroundcolor = PWD. color [4]; $ ('pwdstrong _ text '). innerhtml = PWD. text [4]; $ ('pwdstrong _ text '). style. color = PWD. color [4] ;}}
// ========================== CSS file ==============================
body {Font: 13px ;}/* password verification prompt CSS ------------------------------------ start failed */# tipposition {width: 400px; Height: 16px; line-Height: 18px; padding: 2px 30px ;}. tip {Background: # e6f2ff URL (images/register_tip.png) No-repeat 10px center; Border: 1px #0e5863 dashed; color: #0e5863 ;}. error {Background: # fbecdf URL (images/register_error.png) No-repeat 10px center; Border: 1px red dashed; color: #6d3737 ;}. success {Background: # d6fcd2 URL (images/register_success.png) No-repeat 10px center; Border: 1px #2f5d36 dashed; color: # 3d934a ;} /* password strength CSS restart start ------------------------------ */# pwdstrong_color {width: 136px; Height: 3px; Border: 0px; border-collapse: collapse; border-Spacing: 0; Background: # e6eaed; margin-top: 5px;} # pwdstrong_color TD {padding: 0px; width: 44px;/* If the TD width is not added, google Chrome will not display normally */} # pwdstrong_text {Font: 12px ;}