jquery密码输入强度实时检测提示代码
代码语言:html
所属分类:表单美化
代码描述:jquery密码输入强度实时检测提示代码
代码标签: jquery 密码 强度 实时 检测 提示 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css"> <style> body { margin: 0; padding: 0; width: 100%; height: 100%; text-align: center; } .form-container { display: block; width: 500px; margin: 60px auto; text-align: left; } lable { display: block; position: relative; text-transform: uppercase; color: #aaa; } input[type='password'] { width: 100%; box-sizing: border-box; height: 55px; display: inline-block; border: 3px solid #2F96EF; border-radius: 5px; padding: 0 15px; margin: 10px 0; -webkit-transition: .2s; transition: .2s; } input[type='password']:focus { outline: none; -moz-outline: none; -webkit-outline: none; } lable:before { content: "\f070"; color: #aaa; font-size: 22px; font-family: FontAwesome; position: absolute; right: 25px; top: 44px; } .progress-bar_wrap { width: 300px; height: 5px; background: #F6F6FA; display: inline-block; vertical-align: middle; overflow: hidden; border-radius: 5px; } .form-1 .progress-bar_item { display: inline-block; height: 100%; width: 33.33%; float: left; visibility: hidden; -webkit-transition: background-color .2s, visisility .1s; transition: background-color .2s, visisility .1s; } .form-1 .active { visibility: visible; } .progress-bar_item-1 { } .progress-bar_item-2 { } .progress-bar_item-3 { } .progress-bar_text { display: inline-block; color: #aaa; margin-left: 5px; -webkit-transition: .2s; transition: .2s; } .form-2 .progress-bar_item { display: inline-block; height: 100%; width: 32.5%; margin-right: .8%; border-radius: 5px; float: left; -webkit-transition: background-color .2s, visisility .1s; transition: background-color .2s, visisility .1s; } .form-2 .progress-bar_item-1.active { background-color: #FF4B47; } .form-2 .progress-bar_item-2.active { background-color: #F9AE35; } .form-2 .progress-bar_item-3.active { background-color: #2DAF7D; } </style> </head> <body> <div class="form-container"> <form class="form-1" action=""> <lable> 输入密码 <input class="input-1" type="password" placeholder="••••••"> </lable> <div class="progress-bar_wrap"> <div class="progress-bar_item progress-bar_item-1"></div> <div class="progress-bar_item progress-bar_item-2"></div> <div class="progress-bar_item progress-bar_item-3"></div> </div> <span class="progress-bar_text">Password is blank</span> </form> </div> <div class="form-container"> <form class="form-2" action=""> <lable> 输入密码 <input class="input-2" type="password" placeholder="••••••"> </lable> <div class="progress-bar_wrap"> <div class="progress-bar_item progress-bar_item-1"></div> <div class="progress-bar_item progress-bar_item-2"></div> <div class="progress-bar_item progress-bar_item-3"></div> </div> <span class="progress-bar_text">Password is blank</span> </form> </div> <div class="form-container"> <form class="form-3" action=""> <lable> 输入密码 <input class="input-3" type="password" placeholder="••••••"> </lable> <span class="progress-bar_text">Password is blank</span> </form> </div> <div class="form-container"> <form class="form-4" action="">.........完整代码请登录后点击上方下载按钮下载查看
网友评论0