帮助中心
获取牛币
联系我们
关于我们
版权声明
素材牛首页
微博登录
QQ登录
微信扫码登录
注册
登录
新浪微博
QQ登陆
微信登录
热门搜索:
小程序
支付
Java
后台模板
上传
商城模板
jQuery
手机
Thinkphp
微信
Vue.js
首 页
网页特效
整站源码
PHP实例
网站模版
工具箱
常用代码
论坛
游戏源码
资源分享
当前位置:
首页
»
精选常用代码
» JS验证密码强度效果
JS验证密码强度效果
浏览:1235次
-
评论:0次
-
发布时间:2021-11-20
Html
Css
Js
密码:
6-16个字符区分大小写
弱
中
强
密码长度应为6~16个字符
body { font-size:12px; color:#333; font-family:"微软雅黑"; } span { display:none; width:22px; padding-left:10px; color:#fff; margin-left:2px; } div#yzerror { color:#f00; display:none; } input#pwd { width:232px; }
//功能描述: //1.如果输入密码大于16字符报错:密码长度应为6~16个字符(红色) //2.小于等于16个字符,验证字符的强度 //--(1)如果输入大于6个字符,纯字母或纯数字提示:弱 //--(2)如果输入大于6个字符,字母和数字提示:中,并改变弱的颜色,删除弱的内容为空白 //--(3)如果输入大于6个字符,字母和数组加特殊字符提示:强,并改变弱和中的颜色,删除若何中的内容为空白 //--(4)删除的情况 // --如果删除后小于16个字符判断并提示 window.onload = function() { var $ = function(_id) { var obj = document.getElementById(_id); return obj; } var pwd = $("pwd"); var yz = $("yz"); var ruo = $("ruo"); var zd = $("zd"); var qiang = $("qiang"); var yzerror = $("yzerror"); var regStr = /[a-zA-Z]/; //所有字母 var regNum = /[0-9]/; //所有数字 var fStrNum = /\W/; //所有非字母数字 pwd.onkeyup = function() { //判断密码少于16个字符的情况 if (pwd.value.length <= 16) { //首先,显示报错div yz yz.style.display = "block"; // 隐藏大于16个字符报错的div yzerror yzerror.style.display = "none"; //如果字符大于6个字符并且只包含纯字符 或如果字符大于6个字符并且只包含纯数字 if ((pwd.value.length >= 6 && regStr.test(pwd.value)) || (pwd.value.length >= 6 && regNum.test(pwd.value))) { ruo.style.display = "inline-block"; ruo.style.background = "#f00"; //如果用户删除密码,判断少于6个字符的时候情况 } else if (pwd.value.length < 6) { //隐藏弱span ruo.style.display = "none"; //隐藏中span zd.style.display = "none"; //隐藏强span qiang.style.display = "none"; } //如果用户输入密码大于6个字符并且包含字母和数字,弱背景色为黄色,清空内容;显示中 span if (pwd.value.length >= 6 && regNum.test(pwd.value) && regStr.test(pwd.value)) { ruo.style.cssText = "display:inline-block;background: #fc0;"; ruo.innerHTML = " "; zd.style.cssText = "display:inline-block;background: #fc0;"; //如果用户删除密码,密码大于等于6个字符包含字母和数字,不包括特殊字符 } else if (pwd.value.length >= 6 && regStr.test(pwd.value)) { zd.style.display = "none"; ruo.innerHTML = "弱"; } //如果密码大于等于6个字符并且包含字母数字和特殊字符 if (pwd.value.length >= 6 && regNum.test(pwd.value) && regStr.test(pwd.value) && fStrNum.test(pwd.value)) { ruo.style.cssText = "display:inline-block;background: #090;"; ruo.innerHTML = " "; zd.style.cssText = "display:inline-block;background: #090;"; zd.innerHTML = " "; qiang.style.cssText = "display:inline-block;background: #090;"; //判断用户删除 } else if (pwd.value.length >= 6 && regNum.test(pwd.value) && regStr.test(pwd.value)) { ruo.style.cssText = "display:inline-block;background: #fc0;"; ruo.innerHTML = " "; zd.style.cssText = "display:inline-block;background: #fc0;"; zd.innerHTML = "中"; qiang.style.display = "none"; //判断用户删除 } else if ((pwd.value.length >= 6 && regNum.test(pwd.value) && fStrNum.test(pwd.value)) || (pwd.value.length >= 6 && regStr.test(pwd.value) && fStrNum.test(pwd.value))) { ruo.style.cssText = "display:inline-block;background: #fc0;"; ruo.innerHTML = " "; zd.style.cssText = "display:inline-block;background: #fc0;"; zd.innerHTML = "中"; qiang.style.display = "none"; } } else { yz.style.display = "none"; yzerror.style.display = "block"; } } }
↑上面代码改变,会自动显示代码结果
jQuery调用版本:
1.11.3
<!doctype html><html><head><meta charset="utf-8"><title>JS验证密码强度效果-www.sucainiu.com</title><script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script><style>
</style></head><body>
<script>
</script>
</body></html>
立即下载
收藏
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!
充值积分
充值会员
更多说明»
代码描述:原创密码强度验证代码
纯JS实现文字横向无缝滚动效果
swiper实现的全屏滚动切换效果
讨论这个常用代码(0)
回答他人问题或分享心得会奖励牛币
〒_〒 居然一个评论都没有……
文明上网,理性发言! 😉 阿里云幸运券,
戳我领取
发表评论
提交回复
我的积分余额:
0
已下载次数:
1235
所需牛币:
5
开始下载
牛币获取:
签到、评论、充值
» 在线充值
(10牛币=1元)
成为VIP可永久免积分下载全部常用代码
» 查看详情
VIP
客服
签到
充值