JS高级---案例：验证密码的强度
案例：验证密码的强度
1. 给我密码,我返回对应的级别
2. 每次键盘抬起都要获取文本框中的内容, 验证文本框中有什么东西, 得到一个级别, 然后下面的div显示对应的颜色
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style type="text/css">
#dv {
width: 300px;
height: 200px;
position: absolute;
left: 300px;
top: 100px;
} .strengthLv0 {
height: 6px;
width: 120px;
border: 1px solid #ccc;
padding: 2px;
} .strengthLv1 {
background: red;
height: 6px;
width: 40px;
border: 1px solid #ccc;
padding: 2px;
} .strengthLv2 {
background: orange;
height: 6px;
width: 80px;
border: 1px solid #ccc;
padding: 2px;
} .strengthLv3 {
background: green;
height: 6px;
width: 120px;
border: 1px solid #ccc;
padding: 2px;
}
</style> <body>
<div id="dv">
<label for="pwd">密码</label>
<input type="text" id="pwd" maxlength="16">
<!--课外话题-->
<div>
<em>密码强度：</em>
<em id="strength"></em>
<div id="strengthLevel" class="strengthLv0"></div>
</div>
</div>
<script src="common.js"></script>
<script> //获取文本框注册键盘抬起事件
my$("pwd").onkeyup = function () {
//每次键盘抬起都要获取文本框中的内容,验证文本框中有什么东西,得到一个级别,然后下面的div显示对应的颜色
//如果密码的长度是小于6的,没有必要判断
my$("strengthLevel").className = "strengthLv" + (this.value.length >= 6 ? getLvl(this.value) : 0);
}; //给我密码,我返回对应的级别
function getLvl(pwd) {
var lvl = 0;//默认是0级
//密码中是否有数字,或者是字母,或者是特殊符号
if (/[0-9]/.test(pwd)) {
lvl++;
}
//判断密码中有没有字母
if (/[a-zA-Z]/.test(pwd)) {
lvl++;
}
//判断密码中有没有特殊符号
if (/[^0-9a-zA-Z_]/.test(pwd)) {
lvl++;
}
return lvl;//最小的值是1,最大值是3
} </script> </body> </html>
JS高级---案例：验证密码的强度的更多相关文章
- JS高级---案例：验证表单
案例:验证表单 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- JS高级---案例：验证用户输入的是不是中文名字
案例:验证用户输入的是不是中文名字 [\u4e00-\u9fa5] <!DOCTYPE html> <html lang="en"> <head> ...
- JS高级---案例：验证用户输入的是不是邮箱
案例:验证用户输入的是不是邮箱 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...
- JS高级---案例贪吃蛇，把封装的函数移动到js文件中
案例贪吃蛇,把封装的函数移动到js文件中 <!DOCTYPE html> <html lang="en"> <head> <meta ch ...
- JS高级---案例：随机小方块 （贪吃蛇的食物部分）
案例:随机小方块 产生随机数对象,自调用构造函数 产生小方块对象,自调用构造函数,里面存放: 食物的构造函数 给原型对象添加方法:初始化小方块的显示的效果及位置---显示地图上 给原型对象添加方法,产 ...
- js简单正则表达式验证密码
包含3种及以上 var reg = new RegExp("^(?![A-Za-z]+$)(?![A-Z\\d]+$)(?![A-Z\\W]+$)(?![a-z\\d]+$)(?![a-z\ ...
- JS高级---案例：贪吃蛇小游戏
案例:贪吃蛇小游戏 可以玩的小游戏,略复杂,过了2遍,先pass吧 先创建构造函数,再给原型添加方法.分别创建食物,小蛇和游戏对象. 食物,小蛇的横纵坐标,设置最大最小值,运动起来的函数,按上下左右键 ...
- JS简单验证密码强度
<input type="password" id="password" value=""/><button id=&qu ...
- js验证密码强弱
JS密码强度验证 <%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...
随机推荐
- 3Python脚本在linux环境下头文件解释
#!/usr/bin/python到底是什么意思 有这句的,加上执行权限后,可以直接用 ./ 执行,不然会出错,因为找不到 python 解释器. #!/usr/bin/python 是告诉操作系统执 ...
- 内网学习之MySQL服务提权
利用MySQL提权原理: 1.具有mysql的root权限,且mysql以system权限运行. 2.具有执行sql语句的权限,webshell或者外连皆可 UDF提权 UDF(user define ...
- jQuery---五角星评分案例
五角星评分案例 1. 鼠标经过li的时候,当前的位置是实心五角星,前面的是实心.当前位置后面的是空心.注意此处不能完全用链式编程写到底 2. 鼠标离开,comment的所有孩子变为空心五角星.额外,找 ...
- 智能家居为MCU带来巨大需求量
新一代年轻消费族群对于生活品质的需求逐渐提高,不仅小米要发展智能家居,中兴通讯也在于近日在北京揭晓智"智能家居"将成为市场主流,而智能家居的崛起也必然引爆MCU的需求量迅速攀升,众 ...
- 搁置：vue-element-admin
初衷 了解桌面应用类前端搭建的解决方案 -------------------------------------------------------------------------------- ...
- Elasticsearch启动、停止脚本
注:本文出自博主 Chloneda:个人博客 | 博客园 | Github | Gitee | 知乎 本文源链接:https://www.cnblogs.com/chloneda/p/es-shell ...
- Ubuntu中FTP安装配置及基本概念(原创)
注:本文出自博主 Chloneda:个人博客 | 博客园 | Github | Gitee | 知乎 本文源链接:https://www.cnblogs.com/chloneda/p/ftp-inst ...
- JavaScript-跨浏览器事件处理程序（EventUtil）
事件操作对象: var EventUtil= { //添加事件 addHandler: function (element, type, handler) { if (element.addEvent ...
- Spark学习之路 （十八）SparkSQL简单使用[转]
SparkSQL的进化之路 1.0以前: Shark 1.1.x开始: SparkSQL(只是测试性的) SQL 1.3.x: SparkSQL(正式版本)+Dataframe 1.5.x: Spar ...
- Tomcat目录详解
最近在项目部署时,有时通过使用公司提供的Jdoc容器引擎部署上线项目,有时使用Jenkins自动化部署,甚至有的项目直接打war包上传到弹性云的tomcat中进行部署.虽然部署方式略有不同,但是归根结 ...