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 ...
随机推荐
- 使用CSV Data Set Config配置原件，参数化数据
对接口数据的参数化方式大概有三种方式,1:jmeter内置函数:2:借助CSV Data Set Config配置原件:3:jdbc连接数据库,使用数据表字段 此处主要讲第二种:借助CSV Data ...
- RAID | 故障处理
RAID | 故障处理 Unconfigured(good), Spun Up 背景:磁盘替换后在导入外部配置时提示失败,磁盘状态如题. MegaCli -pdgetmissing -a0查看miss ...
- 常用Content-type对照表
文件扩展名 Content-type .html text/html .xhtml text/html .gif image/gif .png image/png .jpg image/jpeg 更加 ...
- idea svn提交时,performing vcs refresh时间很长的解决办法
解决方法:version control -> local changes -> local changelist 列表中无用的文件或文件夹右键选择svn忽略 ps:原因是文件太多,导致对 ...
- Electron – 项目报错整理(打包~2): electron-packager踩坑
- 如何在CentOS上安装Tensorflow的gpu版本？
系统配置 系统版本: Centos7.6 语言: Python3.5(anaconda3 4.2) 框架: Tensorflow 安装依赖 sudo yum install openjdk-8-jdk ...
- Ceph集群网络切换
背景:需要对已部署好的Ceph集群切换网络,包含包含公共网络和集群网络 1 关闭所有mon节点的mon服务并修改服务器IP systemctl stop ceph-mon@storage01.serv ...
- CF575A Fibonotci [线段树+矩阵快速幂]
题意 \(s\{\}\) 是一个循环数列 循环节为 \(n\),你可以改掉 \(m\) 项,这 \(m\) 项独立,且不影响循环节 考虑线段树维护矩阵,单点修改最多m次,每次矩阵快速幂就完事了 // ...
- 【32】Padding（填充）原理讲解
Padding 为了构建深度神经网络,你需要学会使用的一个基本的卷积操作就是padding,让我们来看看它是如何工作的. 我们在之前笔记中看到,如果你用一个3×3的过滤器卷积一个6×6的图像,你最 ...
- 控制input中只能输入固定格式内容
onkeyup 事件会在键盘按键被松开时发生,onafterpaste 是粘贴触发,没有这个事件用onblur吧,失去焦点时发生输入完,点其他地方就会执行. <html lang="e ...