效果
<style type="text/css">span{width:80px;height: 10px;display: inline-block;background: grey;margin-right: 3px;font-size: 18px;text-align: center;}</style></head><body><input type="text" id="txtobe" /><div id="box" style="margin-top: 4px;"><span id="r">弱</span><span id="z">中</span><span i拿来主义 教案d="q">强</span></div></body></html><script src="public.js"></script><script type="text/javascript"> /* 1、一类字符 是 弱 纯数字 弱 纯字母 古尔邦节习俗弱 校园绿化设计方案 纯 特殊字符 弱 2、两类字符 是 中 3、三类字符 强 */ //包含数字 字母 特殊字符 三个正则var num = /^\d+$/;//纯数字var char_ = /^[a-z]+$/i;//纯字母var other = /^[!@#内揵$%^&*]+$/;//纯特殊字符var _num = /\d+/;//包含数字var _char = /[a-z]+/i;//包含字母var _other = /[!@#$%^&*]+/ //包含特殊字符$id("txt").onkeyup = function(){var str = this.value;if(str.length < 5){//内容的长度小于5，颜色不变$id("r").style.background = "grey";$id("z").style.background = "grey";$id("q").style.background = "grey";return}//排他思想$id("r").style.background = "grey";$id("z").style.background = "grey";$id("q").style.background = "grey";if(num.test(str) || char_.test(str) || other.test(str)){//纯数字或者纯字母或者纯其他字符都是弱$id("r").style.background = "deeppink";}el if(_num.test(str) && _char.test(str) && _other.test(str)){//三个都包含 强$id("q").style.background = "deeppink";}el{$id("z").style.background = "deeppink";}}</script>
本文发布于:2023-04-03 09:25:24，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/c916d80dbe38518d4c9222098bfb9fa5.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：密码强度.doc
本文 PDF 下载地址：密码强度.pdf
| 留言与评论（共有 0 条评论） |
