Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
css
html { box-sizing: border-box; font-size: 62.5%; } * { padding: 0; margin: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; box-sizing: inherit; } *::after, *::before { box-sizing: inherit; } .bg-transparent { background-color: transparent !important; } .bg-red { background-color: #e74c3c !important; } .bg-orange { background-color: #e67e22 !important; } .bg-green { background-color: #2ecc71 !important; } body .password-wrapper { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } body { background-color: #3498db; } body .password-wrapper { width: 80%; max-width: 320px; border-radius: 5px; background-color: #fff; overflow: hidden; } body .password-wrapper .input { border: none; padding: 10px 15px; font: small-caption; font-size: 18px; font-size: 1.8rem; width: calc(100% - 50px); color: #34495e; outline: none; line-height: 1.5; } body .password-wrapper .icon-wrapper { position: relative; display: inline; float: right; width: 50px; height: 50px; background-color: #34495e; transition: background-color 0.25s ease-out; cursor: pointer; } body .password-wrapper .icon-wrapper .ion-eye, body .password-wrapper .icon-wrapper .ion-more { font-size: 26px; font-size: 2.6rem; position: absolute; top: 11px; right: 12px; color: #ccc; transition: color 0.25s ease-out; } body .password-wrapper .icon-wrapper .ion-more { right: 14px; } body .password-wrapper .icon-wrapper:hover { transition: background-color 0.25s ease-out; background-color: #2c3e50; } body .password-wrapper .icon-wrapper:hover .ion-eye, body .password-wrapper .icon-wrapper:hover .ion-more { color: #3498db; transition: color 0.25s ease-in; } body .password-wrapper .strength-lines { position: absolute; bottom: 2px; left: 0; right: 0; width: calc(100% - 50px); height: 6px; z-index: 3; } body .password-wrapper .strength-lines .line { position: absolute; background-color: transparent; height: 6px; border-radius: 2px; transition: background-color 0.25s ease-in; } body .password-wrapper .strength-lines .line:not(:first-of-type):not(:last-of-type) { left: 33%; right: 33%; } body .password-wrapper .strength-lines .line:first-of-type { left: 4px; right: 68%; } body .password-wrapper .strength-lines .line:last-of-type { left: 68%; right: 4px; }
JavaScript
$(document).ready(function() { // hide/show password $(".icon-wrapper").click(function() { $(".toggle-password").toggleClass(".ion-eye ion-more"); var input = $($(".toggle-password").attr("toggle")); if (input.attr("type") == "password") { input.attr("type", "text"); } else { input.attr("type", "password"); } }); // strength validation on keyup-event $("#password-field").on("keyup", function() { var val = $(this).val(), color = testPasswordStrength(val); styleStrengthLine(color, val); }); // check password strength function testPasswordStrength(value) { var strongRegex = new RegExp( "^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*])(?=.{8,})" ), mediumRegex = new RegExp( "^(((?=.*[a-z])(?=.*[A-Z]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[A-Z])(?=.*[0-9])))(?=.{6,})" ); if (strongRegex.test(value)) { return "green"; } else if (mediumRegex.test(value)) { return "orange"; } else { return "red"; } } function styleStrengthLine(color, value) { $(".line") .removeClass("bg-red bg-orange bg-green") .addClass("bg-transparent"); if (value) { if (color === "red") { $(".line:nth-child(1)") .removeClass("bg-transparent") .addClass("bg-red"); } else if (color === "orange") { $(".line:not(:last-of-type)") .removeClass("bg-transparent") .addClass("bg-orange"); } else if (color === "green") { $(".line") .removeClass("bg-transparent") .addClass("bg-green"); } } } });
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>密码强度验证-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style>
</style> </head> <body>
<script>
</script>
</body> </html>
2012-2021 jQuery插件库版权所有
jquery插件
|
jq22工具库
|
网页技术
|
广告合作
|
在线反馈
|
版权声明
沪ICP备13043785号-1
浙公网安备 33041102000314号