这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
仿 JQuery 中文社区注册, JS 密码强度验证 (兼容 IE, 火狐, 谷歌)
大概样式:
源码:
- //=================html页面=================
- <body onload="InitCSS();">
- <form>
- <div>
- <table>
- <tr>
- <td>
- 密码:
- </td>
- <td>
- <input id="txtPassword" type="password" style="width: 130px;" maxlength="16" onfocus="InitCss();"
- 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 文件
- //使用$替换document.getElementById函数
- var $ = function(v) { return document.getElementById(v); }
- /******************************************************验证用户输入******************************************************/
- function ValidateInput(element, value) {
- //验证密码
- if (element == "password") {
- if (value.toString().length < 6) {
- $('tipPosition').className = 'error';
- $('tipPosition').innerHTML = "密码设置错误。密码长度过小。";
- return;
- }
- else {
- $('tipPosition').className = 'success';
- $('tipPosition').innerHTML = "填写正确。";
- }
- }
- }
- /*================================密码验证JS =========== Begin=======================================*/
- //密码初始化的样式
- function InitCss() {
- $('tipPosition').className = 'tip';
- $('tipPosition').innerHTML = "最小长度:6。 最大长度:16。";
- }
- /*================================密码强度 ===========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: ['太短', '弱', '一般', '很好', '极佳']
- };
- 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 文件 =================
- body
- {
- font: 13px 宋体;
- }
- /*密码验证提示CSS --------------------------------开始--------------------------------*/
- #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;
- }
- /*密码强度CSS --------------------------------开始--------------------------------*/
- #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; /*如不加td宽度,Google的Chrome不会正常显示*/
- }
- #pwdStrong_text
- {
- font: 12px 宋体;
- }
(adsbygoogle = window.adsbygoogle || []).push({});
来源: http://www.phperz.com/article/17/0702/285400.html