好些网站的注册功能中,都有对密码进行验证并且还有强度提示。下面就来实现这种效果。
密码强度说明:
密码强度:弱——纯数字,纯字母,纯符号
密码强度:中——数字,字母,符号任意两种的组合
密码强度:强——数字,字母,符号全部都要有
实现思路:
在输入框提示区域编写两个div层,一个显示提示文字,一个显示密码强度提示。
给文本框添加onkeyup的验证事件:
1.没有输入时,显示“密码可由字母、数字、特殊符号组成,长度为6-18个字符”;
2.光标聚焦到文本框中,在密码长度没有6位之前,显示“密码不少于6位”提示文字;
3.当文本框中的字符达到6位后,显示提示文字的层隐藏,显示密码强度的层显示出来;
4.通过正则表达式控制密码强度提示的三个span的显隐,对上面三种情况,只需要对第一种,第三种进行验证即可,相对来说,这两个表达式比较好些一点。这两种验证后也都剩下任意两种组合,无需再编写表达式对第二种验证。
关键代码如下:
JS代码:

    var reg1 = /(^\d{6,}$)|(^[a-zA-Z]{6,}$)|(^[^a-zA-Z0-9]{6,}$)/; //数字,字母或符号其中的一种
var reg7 = /\d*\D*((\d+[a-zA-Z]+[^0-9a-zA-Z]+)|(\d+[^0-9a-zA-Z]+[a-zA-Z]+)|([a-zA-Z]+\d+[^0-9a-zA-Z]+)|([a-zA-Z]+[^0-9a-zA-Z]+\d+)|([^0-9a-zA-Z]+[a-zA-Z]+\d+)|([^0-9a-zA-Z]+\d+[a-zA-Z]+))\d*\D*/; //数字字母字符任意组合
function check_pwd() {
var pwd = document.getElementByIdx_x_x_x_x_x("txtPwd").value;
if (pwd.length < 6) {
$("#pwdPrompt div:eq(1)").html("密码长度不能小于6位");
return false;
} else {
$("#pwdPrompt div:eq(1)").css("display", "none");
$("#pwdPrompt div:eq(0)").css("display", "block");
if (reg1.test(pwd)) {
$("#pwdLength span:eq(0)").css("display", "block");
$("#pwdLength span:eq(1)").css("display", "none");
$("#pwdLength span:eq(2)").css("display", "none");
return true;
}
else if (!reg7.test(pwd)) {
$("#pwdLength span:eq(0)").css("display", "block");
$("#pwdLength span:eq(1)").css("display", "block");
$("#pwdLength span:eq(2)").css("display", "none");
return true;
}
else {
$("#pwdLength span:eq(0)").css("display", "block");
$("#pwdLength span:eq(1)").css("display", "block");
$("#pwdLength span:eq(2)").css("display", "block");
return true;
}
return true;
}
}

Html代码:

<style type="text/css">
#pwdLength span {
display: none;
float: left;
height: 14px;
width: 51px;
font-size: 12px;
text-align: center;
line-height: 14px;
color: white;
border-right: 1px solid white;
}
</style>
<input id="txtPwd" onkeyup="return check_pwd()" type="password" /><br />
<div id="pwdPrompt">
<div id="pwdLength">
<span style=" background-color:#999;">弱</span>
<span style=" background-color:#666;">中</span>
<span style=" background-color:#333;">强</span>
</div>
<div style="width: 340px;">密码可由字母、数字、特殊符号组成,长度为6-18个字符</div>
</div>

使用javascript对密码进行有密码强度提示的验证的更多相关文章

  1. javascript实现playfair和hill密码算法

    时至期末,补习信息安全概论作业.恰巧遇古典密码学算法中的playfair算法和hill算法,用javascript语言实现起来是在有趣,边查百度边编码,顺便好好补习一下javascript基础. pl ...

  2. javascript记住用户名和登录密码

    javascript记住用户名和登录密码 下面主要通过代码给大家展示下javascript记住用户名和登录密码,具体代码内容请看下文. <script type="text/javas ...

  3. python 字符串实例:检查并判断密码字符串的安全强度

    检查并判断密码字符串的安全强度 import string def check(pwd): #密码必须至少包含六个字符 if not isinstance(pwd,str) or len(pwd)&l ...

  4. MVC5 网站开发之六 管理员 2、添加、删除、重置密码、修改密码、列表浏览

    目录 奔跑吧,代码小哥! MVC5网站开发之一 总体概述 MVC5 网站开发之二 创建项目 MVC5 网站开发之三 数据存储层功能实现 MVC5 网站开发之四 业务逻辑层的架构和基本功能 MVC5 网 ...

  5. 强密码和弱密码并没有什么区别?NIST密码安全标准更新:不再建议密码要求混合大写字母、字符和数字

    作为一名认真负责的小编,每次注册账号设置密码的时候都是最痛苦的,太简单的怕被破解,太难的又记不住. 等你好不容易记住密码,三个月后IT同学过来拍拍你的肩膀,"你的密码到期了,记得改啊--&q ...

  6. ssm中通过ajax或jquer的validate验证原密码与修改密码的正确性

    一.ajax 1. <script type="text/javascript"> //验证原密码1.ajax,正则 var ok1=false,ok2=false,o ...

  7. Mysql 5.7 忘记root密码或重置密码的详细方法

    在Centos中安装完MySQL数据库以后,不知道密码,这可怎么办,下面给大家说一下怎么重置密码 在Centos中安装完MySQL数据库以后,不知道密码,这可怎么办,下面给大家说一下怎么重置密码 1. ...

  8. linux(centos)下密码有效期和密码复杂度设置

    1.密码有效期 方法一: chage -l 用户名 查看用户的过期时间 chage -M 99999 用户名 用命令修改过期时间为永久 chage -M 90 用户名 设置密码有效期为90天 chag ...

  9. oracle 密码忘记、密码遗失解决办法

    忘了密码可以用操作系统验证方式登入SYS用,然后可以随意修改密码了.登入方法:1.进入命令提示符下,输入:sqlplus /nolog 回车进入SQL.2.在SQL环境下,输入:SQL> con ...

随机推荐

  1. 应用代理 socket TCP协议 的资料

    http://blog.csdn.net/guowake/article/details/6615728 Linux下高并发socket最大连接数所受的各种限制 http://stackoverflo ...

  2. Android 国际化

    由于公司的项目是投放 google play store , 所以要做国际化.国际化遇到的两个大问题 字符串国际化 布局样式国际化 一:字符串国际化        解决这个问题很简单,在res目录下放 ...

  3. Android Studio no debuggable applications解决方案

    android studio 默认是没有开启debuggable 功能的,在tools里打开该功能即可,Tools->Android->Enable ADB Integration. 刚设 ...

  4. Android 加载大图片到内存

    本文演示android中图片加载到内存 首先设计界面: 代码如下: <LinearLayout xmlns:android="http://schemas.android.com/ap ...

  5. CATransform3D方法汇总

    CATransform3D三维变换 struct CATransform3D { CGFloat m11, m12, m13, m14; CGFloat m21, m22, m23, m24; CGF ...

  6. xcode 7及以上版本网络请求不成功的原因

    在Xcode 7以前的版本使用的是http协议,从Xcode 7开始,默认使用的是https协议,这优化了加密性能. 要想在Xcode 7及以上版本能够进行网络请求,我们需要在info.plist文件 ...

  7. UIScrollView之轮转图片

    在iOS开发中,经常会在APP首页看到多张图片进行轮换.刚开始做的时候,感觉很麻烦,不是很好做,查阅资料后,我总结了一下,自己封装了一个简单的轮转图片库: UIScrollView无限滑动 ,只需要三 ...

  8. CDC 2013 北京站手记

    受搜狐畅游的邀请,这次能够有机会参与2013中国开发者大会北京站的活动. 本次大会的主题是“游戏”和“移动”,因此上午的峰会安排了5个主讲,分别就搜索.云存储服务器.游戏媒体.移动应用和游戏渠道等多方 ...

  9. MYSQL数据回流

         一般的网站应用中,总会有部分二次数据(处理过的原始数据)展现给前台,比如,拿购物网站来说,购买进口奶粉最多的用户群体:哪类产品消费增长趋势最旺盛:用户的消费历史归类等都是二次数据.由于这部分 ...

  10. CentOS6 Shell脚本/bin/bash^M: bad interpreter错误解决方法

    在windows下保存了一个脚本文件,用ssh上传到centos,添加权限执行nginx提示没有那个文件或目录.shell脚本放到/etc/init.d/目录下,再执行/etc/init.d/ngin ...