<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>邮箱密码验证</title>
<style media="screen">
*{
margin: 0px;
padding: 0px;
}
#wrap {
width: 255px;
height: 17px;
display: none;
position: absolute;
top: 60px;
left: 180px;
}
#wrap>p {
width: 60px;
height: 15px;
line-height: 15px;
text-align: center;
display: inline-block;
font-size: 0.8em;
}
form {
margin: 20px;
}
span {
font-size: 0.8em;
}
#warning {
position: absolute;
top: 62px;
left: 50px;
}
#falseAlarm {
position: absolute;
top: 62px;
left: 50px;
display:none;
color:red;
}
</head>
<body>
<form class="" action="index.html" method="post">
<span style="color:red">*</span><span>密码</span>
<input id="passWord" style="width: 300px;height:30px;border:1px solid lightgrey;"type="password" name="name" value="">
</form>
<span id="warning">6~16个字符，区分大小写</span>
<span id="falseAlarm">密码长度应为6~16个字符</span>
<div id="wrap">
<p id="weak">弱</p>
<p id="medium">中等</p>
<p id="strong">强</p>
</div>
</body>
<script type="text/javascript">
/*
定义密码的规则
1、密码长度位6～16位有效字符
2、如果密码是纯数字、纯字母大写或者小写，则密码强大为弱
3、密码中包含数字和字母的组合，则密码强度为中等
4、密码中包含字母、大小写字母。下划线的组合密码强度为强
*/
var passWord = document.getElementById("passWord");
var wrap = document.getElementById('wrap');
var weak = document.getElementById('weak');
var medium = document.getElementById('medium');
var strong = document.getElementById('strong');
var warning = document.getElementById('warning');
var falseAlarm = document.getElementById('falseAlarm');
//添加键盘监听事件
function addKeyEvent(event){
event = event | window.event;
var passcord = passWord.value;
//密码强度为弱正则表达式
var low = /(^\d{6,16}$)|(^[a-z]{6,16}$)|(^[A-Z]{6,16}$)|(^_{6,16}$)/g;
//密码强度为中等正则表达式
var middle = /(^[a-zA-Z]{6,16}$)|(^[a-z\d]{6,16}$)|(^[A-Z\d]{6,16}$)|(^[A-Z_]{6,16}$)|(^[_\d]{6,16}$)|(^[a-z_]{6,16}$)|(^[A-Z\d]{6,16}$)/g;
//密码强度为强正则表达式
var high = /(^[a-zA-Z\d]{6,16}$)|(^[a-zA-Z_]{6,16}$)|(^[a-z\d_]{6,16}$)(^[A-Z\d_]{6,16}$)|(^[a-zA-Z\d_]{6,16}$)/g;
if (low.test(passcord)) { //low.test(passcord) 如果满足low正则表达式，则返回true
wrap.style.display = "block";
weak.style.color = "white";
medium.style.color = "grey";
strong.style.color = "grey";
weak.style.background = "rgb(240,146,148)";
medium.style.background = "rgb(228,228,228)";
strong.style.background = "rgb(228,228,228)";
} else if (middle.test(passcord)) { //如果满足middle正则表达式，则返回true
wrap.style.display = "block";
weak.style.color = "rgb(243,218,80)";
medium.style.color = "white";
strong.style.color = "grey";
weak.style.background = "rgb(243,218,80)";
medium.style.background = "rgb(243,218,80)";
strong.style.background = "rgb(228,228,228)";
} else if(high.test(passcord)){ //如果满足high正则表达式，则返回true
wrap.style.display = "block";
weak.style.color = "rgb(76,173,79)";
medium.style.color = "rgb(76,173,79)";
strong.style.color = "white";
weak.style.background = "rgb(76,173,79)";
medium.style.background = "rgb(76,173,79)";
strong.style.background = "rgb(76,173,79)";
} else {
wrap.style.display = "none"; //如果不满足正则方程则不会显示密码强度
}
//假如输入密码位数超过16位，则会显示密码长度应为6~16个字符
if (passcord.length >= 16) {
warning.style.display = "none";
falseAlarm.style.display = "block";
} else {
//假如输入密码位数没超过16位，则会显示：6~16个字符，区分大小写
warning.style.display = "block";
falseAlarm.style.display = "none";
}
}
passWord.addEventListener('keyup',addKeyEvent,false);
</script>
</html>
效果如图所示：
- 如何使用JavaScript和正则表达式进行数据验证
利用客户端JavaScript的优势,JavaScript中的正则表达式可以简化数据验证的工作,下面与大家分享下如何使用JavaScript和正则表达式进行数据验证,感兴趣的朋友可以参考下哈 数据验证 ...
- 邮箱&&密码验证-原理
原理版: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...
- java密码验证正则表达式校验
,正则表达式就是记录文本规则的代码.php密码验证正则表达式(8位长度限制)<?php //密码验证 $password = "zongzi_Abc_oo13a2"; $n ...
- 第一百五十节，封装库--JavaScript，表单验证--密码验证
封装库--JavaScript,表单验证--密码验证 效果图 html <div id="reg"> <h2 class="tuo">& ...
- JavaScript 关于金额、数字验证的正则表达式
JavaScript 关于金额.数字验证的正则表达式 function ismoney(money) { var reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^ ...
- js 常用正则表达式表单验证代码
正则表达式使用详解 简介 简单的说,正则表达式是一种可以用于模式匹配和替换的强有力的工具.其作用如下:测试字符串的某个模式.例如,可以对一个输入字符串进行测试,看在该字符串是否存在一个电话号码模式或一 ...
- 深入浅出的javascript的正则表达式学习教程
深入浅出的javascript的正则表达式学习教程 阅读目录 了解正则表达式的方法 了解正则中的普通字符 了解正则中的方括号[]的含义 理解javascript中的元字符 RegExp特殊字符中的需要 ...
- 深入浅出Javascript的正则表达式
深入浅出的javascript的正则表达式学习教程 阅读目录 了解正则表达式的方法 了解正则中的普通字符 了解正则中的方括号[]的含义 理解javascript中的元字符 RegExp特殊字符中的需要 ...
- javascript类型系统——正则表达式RegExp类型
× 目录 [1]对象 [2]实例属性 [3]静态属性[4]实例方法 前面的话 前面已经介绍过javascript中正则表达式的基础语法.javascript的RegExp类表示正则表达式,String ...
随机推荐
- Gauge自动化测试框架的安装和入门
- Spring MVC中的M V C
M→Model 模型 V→View 视图 C→Controller 控制器 也就是说一次交互由生到死(请求到相应) 需要经过 这三个层级 来完成 那么为什么这么设计 这么设计又有什么好处 我是这么认为 ...
- 备战-Java 并发
备战-Java 并发 谁念西风独自凉,萧萧黄叶闭疏窗 简介:备战-Java 并发. 一.线程的使用 有三种使用线程的方法: 实现 Runnable 接口: 实现 Callable 接口: 继承 Thr ...
- CF896D Nephren Runs a Cinema
CF896D Nephren Runs a Cinema 题意 售票员最开始没有纸币,每次来一个顾客可以给她一张.拿走她一张或不操作.求出不出现中途没钱给的情况 \(n\) 名顾客后剩余钱数在 \(l ...
- POJ3264线段树求最值
刚开始还觉得有点怪怪的.因为想着如果每个树只是单纯地记录它所在的区间的话会不会有不在区间内的数据给更新了,但是我好像是傻掉了因为如果有这种情况出现的话在父亲节点就会分成l,mid和mid+1,r两个区 ...
- string子串匹配（用string自带函数，不涉及char数组转换）
using namespace std; #include <iostream> #include<string> //第1种,用string自带的s.subdtr()截取任意 ...
- Clip Studio Paint EX 1.10.6安装破解教程
clip studio paint是一款牛逼的绘图软件,简称csp.做动漫.漫画设计的同学的必备神器.本文教大家如何安装并破解 clip studio paint ex 1.10.6版本,文章教程提供 ...
- js学习笔记之日期倒计时(天，时，分，秒）
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- Tomcat 性能监控与优化
JMX JMX(Java Management Extensions)是一个为应用程序植入管理功能的框架.JMX是一套标准的 代理和服务,实际上,用户可以在任何Java应用程序中使用这些代理和服务实现 ...
- Java的三种日期工具 Date Calendar SimpleDateFormat
三种日期工具 配合下面的案例可以更加深度的了解 Date 需要导包java.util.Date Date d = new Date(); //两种都是获取到现在时间的时间戳 long t1 = d.g ...
