使用HTML,CSS及JS實現注冊功能中密碼強度的顯示，根據輸入的密碼判斷并顯示用戶輸入密碼的強度等級是高還是低等。

效果演示

代碼演示

html內容

<div class="container"><div class="userName-wrapper"><label for="userName">賬戶:</label><input type="text" id="userName"><span class="unmInfo"><i class="warn"></i></span></div><div class="count"></div><div class="passWord-wrapper"><label for="psd">密碼:</label><input type="password" id="psd"><span class="psdInfo"></span></div><div class="strong"><p class="fl"><span class="hover">弱</span><span class="">中</span><span class="">強</span></p></div><div class="passWord1-wrapper"><label for="psd1">確認密碼:</label><input type="password" id="psd1" disabled=""><span class="psd1Info"></span></div><div class="btn-wrapper"><input type="button" class="btn" value="注冊"></div></div>

css內容

<style>.container{width:1200px;margin:200px auto;}.container>div{margin-bottom:6px;}input{display: inline-block;border:0;padding:0;margin:0;}#userName,#psd,#psd1{width:260px;height:34px;border:1px solid #ccc;padding:0 10px;font-size: 18px;color:#ccc;outline: none}.count{height:16px;line-height: 16px;font-size: 14px;color:#ccc;visibility: hidden;padding-left:160px;}label{display:inline-block;width:150px;text-align: right}.btn{display: inline-block;width:120px;height:40px;text-align:center;font-size:16px;line-height: 40px;background: #e4393c;color:#fff;margin-left:160px;border-radius: 10px;}.strong p{margin-left: 158px;font-size: 0;}.strong p span{display: inline-block;font-weight: normal;font-style: normal;padding:0;margin:0;width:94px;height:20px;background: #f9d194;font-size: 13px;color:#fff;text-align: center;line-height: 20px;}.strong p span.hover{background: #f97101;}.strong p.active span:nth-child(2){background: #f97101;}.strong p.active1 span{background: #f97101;}.unmInfo{display: none;font-size: 14px;color:#888;}.warn{display: inline-block;width:22px;height:22px;background: url("image/warn.png");background-repeat: no-repeat;background-size:22px 22px;vertical-align: top;}.right{display: inline-block;width:22px;height:22px;background: url("image/right.png");background-repeat: no-repeat;background-size:22px 22px;vertical-align: top;}.cuo{display: inline-block;width:22px;height:22px;background: url("image/cuo.png");background-repeat: no-repeat;background-size:22px 22px;vertical-align: top;}.psdInfo{display: none;font-size: 14px;color:#888;}.psd1Info{display: none;font-size: 14px;color:#888;}.btn-wrapper{margin-top: 15px;}</style>

js內容

<script>function findStr(str, n) {var temp = 0;for (var i = 0; i < str.length; i++) {if (str.charAt(i) == n) {temp++;};};return temp;};window.onload = function() {var userName = document.getElementById("userName");var psd = document.getElementById("psd");var psd1 = document.getElementById("psd1");var unmInfo = document.getElementsByClassName('unmInfo')[0];var count = document.getElementsByClassName('count')[0];var psdInfo = document.getElementsByClassName('psdInfo')[0];var psd1Info = document.getElementsByClassName('psd1Info')[0];var fl = document.getElementsByClassName("fl")[0];var name_length = 0;var reg = /[^\w\u4e00-\u9fa5]/g;var re_n = /[^\d]/g;var re_t = /[^a-zA-Z]/guserName.onfocus = function() {unmInfo.style.display = "inline-block";unmInfo.innerHTML = '<i class="warn"></i> 5-25個字符，一個漢字兩個字符，推薦使用中文會員名。'}userName.onkeyup = function() {count.style.visibility = "visible";name_length = getLength(this.value);count.innerHTML = name_length + "個字符";if (name_length == 0) {count.style.visibility = "hidden";}}userName.onblur = function() {if (reg.test(this.value)) {unmInfo.innerHTML = '<i class="cuo"></i>含有非法字符';} else if (this.value == "") {unmInfo.innerHTML = '<i class="cuo"></i>不能為空';} else if (name_length > 25) {unmInfo.innerHTML = '<i class="cuo"></i>長度超過25個字符';} else if (name_length < 6) {unmInfo.innerHTML = '<i class="cuo"></i>長度少于6個字符';} else {unmInfo.innerHTML = '<i class="right"></i>OK!';}}psd.onfocus = function() {psdInfo.style.display = "inline-block";psdInfo.innerHTML = '<i class="warn"></i> 6-16個字符，請使用字母加數字或者符號，不能單獨使用字母 數字或者字符。';}psd.onkeyup = function() {if (this.value.length > 5) {fl.className = "active";psd1.removeAttribute("disabled");psd1Info.style.display = "inline-block";psd1Info.innerHTML = '<i class="warn"></i> 再輸入一次';} else {fl.className = "";psd1.setAttribute("disabled", "disabled");psd1Info.style.display = "none";psd1.value = "";}if (this.value.length > 10) {fl.className = "active1";} else {fl.className = "";psd1.value = "";}}psd.onblur = function() {var m = findStr(this.value, this.value[0]);if (this.value == "") {psdInfo.innerHTML = '<i class="cuo"></i> 不能為空';} else if (m == this.value.length) {console.log(1);psdInfo.innerHTML = '<i class="cuo"></i> 不能有相同字符';} else if (this.value.length < 6 || this.value.length > 16) {psdInfo.innerHTML = '<i class="cuo"></i> 長度應為6-16個字符';} else if (!re_n.test(this.value)) {psdInfo.innerHTML = '<i class="cuo"></i> 不能全為數字';} else if (!re_t.test(this.value)) {psdInfo.innerHTML = '<i class="cuo"></i> 不能全為字母';} else {psdInfo.innerHTML = '<i class="right"></i> OK';}}psd1.onblur = function() {if (this.value != psd.value) {psd1Info.innerHTML = '<i class="cuo"></i> 兩次輸入的密碼不一致';} else {psd1Info.innerHTML = '<i class="right"></i> OK';}}}function getLength(str) {return str.replace(/[^\x00-xff]/g, "xx").length;}</script>

了解更多關注我喲！！！

總結

以上是生活随笔為你收集整理的密码强度显示的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。