Approximate style:
Source:
Copy Code code as follows:
=================html page =================
<body onload= "Initcss ();" >
<form>
<div>
<table>
<tr>
<td>
Password:
</td>
<td>
<input id= "txtpassword" type= "password" style= "width:130px" "Maxlength=" onfocus= ();
Onblur= "ValidateInput (' password ', this.value)" onkeydown= "Validatepwdstrong (this.value);"/>
</td>
<td>
<div id= "Tipposition" >
</div>
</td>
</tr>
<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>
<td>
<div id= "Pwdstrong_text" >
</div>
</td>
</tr>
</table>
</div>
</form>
</body>
JS file
Copy Code code as follows:
Use $ to replace the document.getElementById function
var $ = function (v) {return document.getElementById (v);}
/****************************************************** Validate user Input ************************************************** ****/
function ValidateInput (element, value) {
Verify Password
if (element = = "Password") {
if (value.tostring (). length < 6) {
$ (' tipposition '). ClassName = ' ERROR ';
$ (' tipposition '). InnerHTML = "Bad password setting. The password length is too small. ";
Return
}
else {
$ (' tipposition '). ClassName = ' success ';
$ (' tipposition '). InnerHTML = "filled out correctly. ";
}
}
}
/*================================ Password Verification js =========== begin=======================================*/
Style for password initialization
function Initcss () {
$ (' tipposition '). ClassName = ' tip ';
$ (' tipposition '). InnerHTML = "min 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 ', ' general ', ' very 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 =================
Copy Code code as follows:
Body
{
font:13px song body;
}
/* Password verification prompts CSS--------------------------------start--------------------------------* *
#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--------------------------------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 not TD width, Google Chrome will not display the normal * *
}
#pwdStrong_text
{
font:12px song body;
}
