技术文章
当前位置:首页 > Javascript技术文章 > JS实现根据密码长度显示安全条功能

JS根据密码输入长度提示安全条的实例方法

  • 发布时间:
  • 作者:码农之家原创
  • 点击:120

这篇文章主要知识点是关于JS、密码输入、提示安全、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

完美图解物联网IoT实操:ESP8266 Arduino,Cordova物联网移动App,JavaScript微控制器编程
  • 类型:物联网大小:60.8 MB格式:PDF出版:电子工业出版社作者:赵英杰
立即下载

更多Javascript相关的学习资源可以参阅 Javascript电子书程序设计电子书 等栏目。

JS实现根据密码长度显示安全条功能

大家在一些网站上经常可以看到数码密码会根据输入的密码长度显示安全条功能,此功能基于js如何实现的呢?下面看下实现代码,具体代码如下所示:

//根据密码长度显示安全条
          <ul class="clear">
          <li>密  码:</li>
          <li> <input type="password" id="pwd" name="pwd" class="in" onKeyUp=pwStrength(this.value) onBlur=pw_y("pwd","pwd1")></li>
          <li><em class="red">*</em></li>
          <li class="i2 grey"><table border="0" bordercolor="#cccccc" style='display:marker'>
          <tr align="center">
            <td id="strength_L" bgcolor="#eeeeee">弱</td>
            <td id="strength_M" bgcolor="#eeeeee">中</td>
            <td id="strength_H" bgcolor="#eeeeee">强</td>
          <td align="left" >
           <label id="pwd1">使用数字,字母,下划线,长度在 6 - 20 个字符之间</label></td>
            </tr>
          </table>         
          </li>
          </ul>
function pwStrength(pwd){
  O_color="#eeeeee";
  L_color="#FF0000";
  M_color="#FF9900";
  H_color="#33CC00";
  if (pwd==null||pwd==''){
    Lcolor=Mcolor=Hcolor=O_color;
  }else{
    S_level=checkStrong(pwd);
    switch(S_level) {
      case 0:
        Lcolor=Mcolor=Hcolor=O_color;
      case 1:
        Lcolor=L_color;
        Mcolor=Hcolor=O_color;
        break;
      case 2:
        Lcolor=Mcolor=M_color;
        Hcolor=O_color;
        break;
      default:
        Lcolor=Mcolor=Hcolor=H_color;
      }
  }
  document.getElementById("strength_L").style.background=Lcolor;
  document.getElementById("strength_M").style.background=Mcolor;
  document.getElementById("strength_H").style.background=Hcolor;
  return;
}

以上所述是小编给大家介绍的JS实现根据密码长度 显示安全条功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对码农之家网站的支持!

以上就是本次给大家分享的关于Javascript的全部知识点内容总结,大家还可以在下方相关文章里找到js实现方块上下左右移动效、 javascript的写法总结、 webpack 2的react开发配置详解、 等javascript文章进一步学习,感谢大家的阅读和支持。

上一篇:JS实现两个select下拉框选项左右移动的实例代码

下一篇:js实现方块上下左右移动效果的实例分享

展开 +

收起 -

JS安全提示 相关电子书
JS安全提示 学习笔记
网友NO.775200

node.js平台下利用cookie实现记住密码登陆(Express+Ejs+Mysql)

此内容需有node.js+express+mysql入门基础,若基础薄弱,可参考博主的其他几篇node.js博文: 1.下载Mysql数据库,安装并配置。创建用户表供登录使用: 2.node.js平台下Express的session与cookie模块包的配置://www.jb51.net/article/112190.htm 3.node.js平台下的mysql数据库配置及连接://www.jb51.net/article/110079.htm 完成前两步后需下载配置Ejs模块包: *下载ejs模块包:npm install ejs --save-dev *配置ejs: /*设置模板资源路径*/ app.set ("views",__dirname+"/views"); //视图模板都在这个文件夹 /*自定义文件后缀名,设置模板引擎*/ app.engine("html",ejs.__express); app.set("view engine","html"); //设置模板引擎,代表视图后缀名是ejs 4.登录页面(login.html) div class="registerBg" section class="registerBox bd" div class="regTittle"登陆/div form method="post" action="/login.do" input type="text" class="phone" placeholder="请输入手机号" id="phone" name="pho……

网友NO.274479

js模拟支付宝密码输入框

本文实例为大家分享了js模拟支付宝密码输入框效果的具体代码,供大家参考,具体内容如下 效果图: 代码: !DOCTYPE htmlhtml lang="en"head meta charset="UTF-8" titleTitle/title/headstyle input{ width:60px; height:60px; font-size:40px; line-height: 60px; }/stylebodyinput type="password"/input type="password"/input type="password"/input type="password"//bodyscript src="jquery-1.11.3.js"/scriptscript $(function(){ var ww=2222;//服务器验证码 $('input').eq(0).focus(); $('input').keyup(function(){ if($(this).val().length==1){ $(this).next().focus() } }) $('input').eq($('input').length-1).keyup(function(){ var valed='' for(var i=0;i$('input').length;i++){ valed=valed+$('input').eq(i).val() } if(Number(valed)==ww){ alert('输入正确') }else{ alert('输入错误') } } ) })/script/html 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。 ……

网友NO.141723

js正则表达式验证密码强度【推荐】

效果图: 代码如下: !DOCTYPE htmlhtml lang="en"head meta charset="UTF-8" title验证密码强度/title style type="text/css" *{margin: 0;padding: 0;} body{background:#ccc;} #demo{width:400px;padding:50px;background:#efefef;border: 1px solid #999;line-height:40px;margin:100px auto 0;} #strength_length{height:6px;width:100px;padding:2px;border: 1px solid #ccc;} .lv1{background:red;} .lv2{background:blue;width:200px;} .lv3{background:green;width:300px;} /style/headbody div id="demo" label for="ipt"密码:/label input type="text" id="ipt"br/ em密码强度:/emem id="strength"/em div id="strength_length"/div /div/bodyscript type="text/javascript" (function(window){ function $(id){ return document.getElementById(id); }; var arr = ["","低","中","高"]; // 获取对象 var ipt = $("ipt"),strength = $("strength"),strLength = $("strength_length"); // 密码输入事件 ipt.onkeyup = function(){ var s = 0; var txt = this.value; if( /[a-zA-Z]/.test(txt) ){ s++; }; if( /[0-9]/.test(t……

网友NO.903105

nodejs密码加密中生成随机数的实例代码

之前关于写了一个nodejs密码加密中生成随机数,最近需要回顾,就顺便发到随笔上了 方法一: Math.random().toString(36).substr(2)运行后的结果就是11位数的随机数 方法二: 1、定义函数 function randomWord(randomFlag, min, max){ var str = "", range = min, arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']; // 随机产生 if(randomFlag){ range = Math.round(Math.random() * (max-min)) + min; } for(var i=0; irange; i++){ pos = Math.round(Math.random() * (arr.length-1)); str += arr[pos]; } return str;} 2、函数的使用 1、生成固定长度的随机数randomWord(false, 位数[自己定义]) 2、生成一个长度从多少到多少的随机数randomWord(true, 至少位数, 最大位……

网友NO.404150

vue中使用cookies和crypto-js实现记住密码和加密的方法

使用crypto-js加解密 第一步,安装 npm install crypto-js 第二步,在你需要的vue组件内import import CryptoJS from "crypto-js"; 第三步,使用 // Encrypt 加密 var cipherText = CryptoJS.AES.encrypt( "my message", "secretkey123" ).toString(); console.log(cipherText) // Decrypt 解密 var bytes = CryptoJS.AES.decrypt(cipherText, "secretkey123"); var originalText = bytes.toString(CryptoJS.enc.Utf8); console.log(originalText); // 'my message' 注意这个mymessage是字符串,如果你要加密的用户id(number类型)得先转成字符串 更多使用请访问官方文档 记住密码 实现原理是登录的时候,如果勾选了记住密码(把‘记住密码'状态保存到localstorage)就保存账号密码到cookies; 之后进入登录页面的时候,判断是否记住了密码(从localstorage判断),如果记住密码则导出cookies到表单; 其中保存使用setcookie方法,取出则使用getcookie方法。 ok,我们来编写方法……

<
1
>

Copyright 2018-2020 xz577.com 码农之家

电子书资源由网友、会员提供上传,本站记录提供者的基本信息及资源来路

鸣谢: “ 码小辫 ” 公众号提供回调API服务、“ 脚本CDN ”提供网站加速(本站寻求更多赞助支持)

版权投诉 / 书籍推广 / 赞助:520161757@qq.com

上传资源(网友、会员均可提供)

查看最新会员资料及资源信息