JS实现密码弱中强显示

来源：懂视网责编：小采时间：2020-11-27 19:58:43

JS实现密码弱中强显示

JS实现密码弱中强显示:本文主要和大家分享JS实现密码弱中强显示，主要以代码的方式和大家分享，希望能帮助到大家。<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/htm

推荐度：

点击下载本文 文档为doc格式

导读JS实现密码弱中强显示:本文主要和大家分享JS实现密码弱中强显示，主要以代码的方式和大家分享，希望能帮助到大家。<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/htm

本文主要和大家分享JS实现密码弱中强显示，主要以代码的方式和大家分享，希望能帮助到大家。

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title></title>
 <meta charset="utf-8" />
 <script>
 onload = function () {
 var tds = document.getElementById('tb').getElementsByTagName('td');


 document.getElementById('txt').onkeyup = function () {
 for (var i = 0; i < tds.length; i++) {//防止输入正确密码后倒退删除时候出问题
 tds[i].style.backgroundColor = 'gray';
 }
 if (this.value.length>0) {
 var result = checkPwd(this.value);
 if (result<=1) {//弱
 tds[0].style.backgroundColor='red';
 }else if (result==2) {//中
 tds[0].style.backgroundColor='green';
 tds[1].style.backgroundColor='green';
 
 }else if (result==3) {//强
 tds[0].style.backgroundColor='blue';
 tds[1].style.backgroundColor='blue';
 tds[2].style.backgroundColor='blue';
 }
 }
 }
 }


 function checkPwd(msg){ //判断含有数字字母特殊符号
 var lvl = 0;
 if (msg.match(/[0-9]/)){
 lvl++;
 }
 if (msg.match(/[a-zA-Z]/)) {
 lvl++;
 }
 if (msg.match(/[^0-9a-zA-Z]/)) {
 lvl++;
 }
 if (msg.length<6) {
 lvl--;
 }
 return lvl;
 }
 </script>
</head>
<body>
 <input type="text" name="name" id="txt" />
 <table id="tb" border="1" style="width:300px;height:35px;text-align:center;background-color:gray">
 <tr>
 <td>
 弱
 </td>
 <td>
 中
 </td>
 <td>
 强
 </td>


 </tr>
 </table>
</body>
</html>

JS实现密码弱中强显示

推荐度：

点击下载本文 文档为doc格式

标签：密码显示 js

热门焦点

JS实现密码弱中强显示

JS实现密码弱中强显示

JS实现密码弱中强显示

最新推荐

猜你喜欢

热门推荐