JS高级---案例:验证密码的强度
2024-09-20 11:04:28
案例:验证密码的强度
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>
最新文章
- Using the rJava package on Win7 64 bit with R
- Linux 休眠,挂起(待机),关机等几个命令的区别及如何实现;如何启用Ubuntu的休眠模式
- PL/0编译器(java version) - MainFrame.java
- python网络编程socket之多线程
- [转]ebkit内核浏览器的Linear Gradients (线性渐变)
- 关于DB2 SQL0805N找不到程序包的错误解决办法
- 利用文件实现Free Pascal中的简单排序功能
- Android studio 删除Module、project
- MyPhone
- bzoj 3626 [LNOI2014]LCA(离线处理+树链剖分,线段树)
- Ubuntu14.04搭建cocos2dx2.2.5开发环境(超级具体)
- js 数组引用 发现的问题
- Windows API 之 InternetOpen、InternetOpenUrl、InternetReadFile
- JavaScript语言精粹-读书笔记
- 聊一聊JS的原型链之高级篇
- HttpListener 实现web服务器
- 关于video标签移动端开发遇到的问题,获取视频第一帧,全屏,自动播放,自适应等问题
- Flask jinja2
- wait(), notify(), notifyAll()等方法介绍
- Git:一个简单示例