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 ...
随机推荐
- winForm学习 2019年4月11日
1.Directory静态类 相似类:File.Path.StreamReader.StreamWirter 创建文件夹:Directory.CreateDirectory 删除文件夹:Directo ...
- kong服务网关API
kong服务网关API pingforever关注 0.1762017.05.23 11:16:08字数 834阅读 7,367 kong简介 Kong 是在客户端和(微)服务间转发API通信的API ...
- Ubuntu18.04下配置深度学习开发环境
在Ubuntu18.04下配置深度学习/机器学习开发环境 1.下载并安装Anaconda 下载地址:https://www.anaconda.com/distribution/#linux 安装步骤: ...
- JavaScript 浅复制和深复制
浅复制只会复制第一层的元素,嵌套的元素还是原来的引用. const obj = { a: 1, b: 2 } const copyObj = Object.assign({}, obj) const ...
- 生成指定规模大小的redis cluster对关系
需求: 指定一批ip列表,生成指定规模大小的redis cluster主从对应关系. ip_list=(1.1.1.1 2.2.2.2 3.3.3.3 4.4.4.4 5.5.5.5) port=70 ...
- CentOS7安装postgreSQL11
1.添加PostgreSQL Yum存储库 sudo yum install https://download.postgresql.org/pub/repos/yum/11/redhat/rhel- ...
- Ubuntu18--使用vi编辑器方向键以及Backspace乱码问题
解决方法一: 可以进入vi /etc/vim/vimrc.tiny目录对vim配置文件进行修改 修改内容: 修改完成就可以正常使用了.(换行的时候Esc退出编译状态,回车换行,输入第二句话,在按Esc ...
- select下拉框相关操作(更新中。。。)
背景 记录一些关于html标签的操作,基本上都是jquery操作 select下拉框 根据value查找对应option,然后执行选中操作 $("#selectId").find( ...
- Elasticsearch + Kibana 简单安装使用
1.资料来源官网,参考: https://www.elastic.co/cn/downloads/elasticsearch https://www.elastic.co/cn/downloads/k ...
- Pikachu-Unsafe Fileupload（不安全的文件上传）
不安全的文件上传漏洞概述 文件上传功能在web应用系统很常见,比如很多网站注册的时候需要上传头像.上传附件等等.当用户点击上传按钮后,后台会对上传的文件进行判断 比如是否是指定的类型.后缀名.大小等等 ...