JS利用正则表达式实现简单的密码强弱判断实例


Posted in Javascript onJune 16, 2017

实现功能:

1、输入字符要在6-16之间;小于6个字符或大于16个字符时给予提示,而且强弱不显示;为0时,也给予提示;

2、当密码在6-16个字符之间时,如果密码全是数字或全是字母,显示弱;密码是数字与字母的组合,则显示强;若为字母数字加下划线,则为强;

效果图如下:

JS利用正则表达式实现简单的密码强弱判断实例

JS利用正则表达式实现简单的密码强弱判断实例

JS利用正则表达式实现简单的密码强弱判断实例

JS利用正则表达式实现简单的密码强弱判断实例

JS利用正则表达式实现简单的密码强弱判断实例

JS利用正则表达式实现简单的密码强弱判断实例

 代码如下:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title></title>
 <style>
  .mm-body{
  position: relative;
  height: 100px;
  width: 450px;
  background-color: wheat;
  }
  .mm-top{
  height:35px;
  width: 450px;
  background-color: wheat;
  }
  .mm-sr{
  height:30px;
  width: 100px; 
  float: left;
  text-align: center; 
  line-height: 30px;
  }
  #mm-pwd{
  float: left;
  height:25px;
  background-color: ghostwhite;
  border-radius: 5px; 
  width: 150px;
  }
 .mm-btm{
  height: 40px;
  width: 140px;
  position: relative;
  margin-left: 110px;
  }
 #lv1,#lv2,#lv3{
  height: 30px;
  width: 40px;
  border-top: 4px solid gainsboro; 
  margin-left: 3px;
  float: left;
  font-size: 18px;
  text-align: center;
  line-height: 25px;
  }
 </style>
 </head>
 
 <body>
 <div class="mm-body">
  <div class="mm-top">
  <span class="mm-sr">请输入密码:</span>
  <form method="get" action="data.html" >
  <input type="password" id="mm-pwd" onkeyup="show()"/>
  </form>
  <span id="mm-pd"style="color: red; font-size: 12px; line-height: 30px;"></span>
  </div>
  <div class="mm-btm">
  <div id="lv1">弱</div>
  <div id="lv2">中</div>
  <div id="lv3">强</div>
  
 <!--强度判断也可用表格做
  <table border="0px" cellpadding="0px" cellspacing="1px" >
  <tr height="20px" >
   <td width="40px" id="lv1" style="border-top: 3px solid darkgrey;">弱</td>
   <td width="40px" id="lv2" style="border-top: 3px solid darkgrey;">中</td>
   <td width="40px" id="lv3" style="border-top: 3px solid darkgrey;">强</td>
  </tr>
  </table>-->
  
  
  </div>
 </div>
 </body>
</html>
<script language="JavaScript">
function show(){
 var a=document.getElementById("mm-pwd").value;
 
 if(a.length==0){
 document.getElementById("mm-pd").innerHTML="密码不能为空!"; 
 }
 else if(a.length<6){
 document.getElementById("mm-pd").innerHTML="密码长度小于6个字符!"; 
 }
 
 else if(a.length>=6&&a.length<=16){
  document.getElementById("mm-pd").innerHTML="";
 var reg=/^[0-9]{6,16}$|^[a-zA-Z]{6,16}$/; //全是数字或全是字母 6-16个字符
 var reg1=/^[A-Za-z0-9]{6,16}$/; //数字、26个英文字母 6-16个字符
 var reg2=/^\w{6,16}$/;  // 由数字、26个英文字母或者下划线组成的字符串 6-16个字符
  if(a.match(reg)){
   document.getElementById("lv1").style.borderTopColor="red"; 
  
   }
  else if(a.match(reg1)){
  document.getElementById("lv1").style.borderTopColor="red"; 
   document.getElementById("lv2").style.borderTopColor="yellow"; 
  }
  else if(a.match(reg2)){
  document.getElementById("lv1").style.borderTopColor="red";
   document.getElementById("lv2").style.borderTopColor="yellow";
   document.getElementById("lv3").style.borderTopColor="green"; 
  }
  }
 
 else if(a.length>16){
 document.getElementById("mm-pd").innerHTML="密码长度大于16个字符!";
 document.getElementById("lv1").style.borderTopColor="gainsboro";
 document.getElementById("lv2").style.borderTopColor="gainsboro";
 document.getElementById("lv3").style.borderTopColor="gainsboro";
 }
 
 }
 
</script>

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
Apply an AutoFormat to an Excel Spreadsheet
Jun 12 Javascript
基于javascript 闭包基础分享
Jul 10 Javascript
JS实现3D图片旋转展示效果代码
Sep 22 Javascript
Node.js操作Firebird数据库教程
Mar 04 Javascript
jquery checkbox无法用attr()二次勾选问题的解决方法
Jul 22 Javascript
jQuery EasyUI 组件加上“清除”功能实例详解
Apr 11 jQuery
jquery请求servlet实现ajax异步请求的示例
Jun 03 jQuery
使用命令行工具npm新创建一个vue项目的方法
Dec 27 Javascript
JS实现仿微信支付弹窗功能
Jun 25 Javascript
Element Card 卡片的具体使用
Jul 26 Javascript
详解ES6中class的实现原理
Oct 03 Javascript
nuxt 实现在其它js文件中使用store的方式
Nov 05 Javascript
vue高德地图之玩转周边
Jun 16 #Javascript
JavaScript实现提交模式窗口后刷新父窗口数据的方法
Jun 16 #Javascript
JS 组件系列之BootstrapTable的treegrid功能
Jun 16 #Javascript
vue之数据交互实例代码
Jun 16 #Javascript
基于jQuery和CSS3实现APPLE TV海报视差效果
Jun 16 #jQuery
JS基于正则实现数字千分位用逗号分隔的方法
Jun 16 #Javascript
利用jquery去掉时光轴头尾部线条的方法实例
Jun 16 #jQuery
You might like
用PHPdig打造属于你自己的Google[图文教程]
2007/02/14 PHP
PJBlog插件 防刷新的在线播放器
2006/10/25 Javascript
二行代码解决全部网页木马
2008/03/28 Javascript
jQuery 表单验证插件formValidation实现个性化错误提示
2009/06/23 Javascript
读jQuery之五(取DOM元素)
2011/06/20 Javascript
jQuery性能优化28条建议你值得借鉴
2013/02/16 Javascript
基于JavaScript实现继承机制之原型链(prototype chaining)的详解
2013/05/07 Javascript
JavaScript DOM事件(笔记)
2015/04/08 Javascript
js贪吃蛇网页版游戏特效代码分享(挑战十关)
2015/08/24 Javascript
JS实现可拖曳、可关闭的弹窗效果
2015/09/26 Javascript
JavaScript中字符串与Unicode编码互相转换的实现方法
2015/12/18 Javascript
神奇!js+CSS+DIV实现文字颜色渐变效果
2016/03/16 Javascript
使用BootStrap实现用户登录界面UI
2016/08/10 Javascript
AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制)
2016/12/12 Javascript
在Debian(Raspberry Pi)树莓派上安装NodeJS的教程详解
2017/09/19 NodeJs
微信小程序 页面滑动事件的实例详解
2017/10/12 Javascript
[38:40]2018DOTA2亚洲邀请赛 4.6淘汰赛 mineski vs LGD 第一场
2018/04/10 DOTA
Python基础知识_浅谈用户交互
2017/05/31 Python
python [:3] 实现提取数组中的数
2019/11/27 Python
通过实例简单了解Python sys.argv[]使用方法
2020/08/04 Python
Python实例教程之检索输出月份日历表
2020/12/16 Python
Agoda西班牙:全球特价酒店预订
2017/06/03 全球购物
Hotter Shoes英国官网:英伦风格,舒适的鞋子
2017/12/28 全球购物
Omio波兰:全欧洲低价大巴、火车和航班搜索和比价
2018/02/16 全球购物
学前教育毕业生自荐信范文
2013/12/24 职场文书
雪山饭庄的创业计划书范文
2014/01/18 职场文书
社区学雷锋活动策划方案
2014/01/30 职场文书
总经理司机岗位职责
2014/02/06 职场文书
住宅质量保证书
2014/04/29 职场文书
大学应届毕业生求职信
2014/05/24 职场文书
市场营销专业毕业生求职信
2014/07/21 职场文书
小学教师暑期培训方案
2014/08/28 职场文书
三年级作文之小小梦想
2019/12/06 职场文书
Axios取消重复请求的方法实例详解
2021/06/15 Javascript
Spring中的使用@Async异步调用方法
2021/11/01 Java/Android
SQL试题 使用窗口函数选出连续3天登录的用户
2022/04/24 Oracle