JavaScript實現(xiàn)密碼框驗證信息
更新時間：2021年11月11日 08:29:30 作者：沒事就寫寫
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)密碼框驗證信息，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了JavaScript實現(xiàn)密碼框驗證信息的具體代碼，供大家參考，具體內(nèi)容如下
效果展示：
代碼展示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="fontss2/iconfont.css" rel="external nofollow" />
<style>
.orginal {
font-size: 13px;
color: deepskyblue;
}
.wrong {
font-size: 13px;
color: red;
}
.right {
font-size: 13px;
color: green;
}
</style>
</head>
<body>
<p>
<input type="text"><span class="orginal icon-wenhao iconfont">請輸入6-16位密碼</span>
</p>
<script>
//獲取元素對象
var input = document.querySelector('input');
var span = document.querySelector('span');
// 注冊事件 失去焦點事件
input.onblur = function() {
if (input.value.length > 0 && input.value.length < 6 || input.value.length > 16) {
span.className = 'iconfont icon-cuowuguanbiquxiao-xianxingyuankuang wrong';
span.innerHTML= '輸入錯誤請輸入6-16位密碼';
}else if(input.value.length >=6 && input.value.length <=16) {
span.className = 'iconfont icon-yiyanzheng right';
span.innerHTML = '輸入正確';
}else {
span.className = 'orginal icon-wenhao iconfont';
span.innerHTML = '請輸入6-16位密碼';
}
}
</script>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
ES6 Object方法擴(kuò)展的應(yīng)用實例分析
這篇文章主要介紹了ES6 Object方法擴(kuò)展的應(yīng)用,結(jié)合實例形式總結(jié)分析了ES6針對對象方法的擴(kuò)展與優(yōu)化,需要的朋友可以參考下2019-06-06
全選與全不選在管理界面還是比較實用的，下面通過checkAll與clearAll兩個函數(shù)來輕松實現(xiàn)，感興趣的朋友不要錯過2013-12-12
這篇文章主要介紹了js實現(xiàn)超簡單的展開、折疊目錄代碼,通過javascript操作鼠標(biāo)點擊事件控制頁面元素樣式的動態(tài)改變實現(xiàn)該功能,非常簡單實用,需要的朋友可以參考下2015-08-08
JS 實現(xiàn)banner圖片輪播效果(鼠標(biāo)事件)
js實現(xiàn)banner圖片輪播效果，通過鼠標(biāo)點擊左右可切換圖片，具體實現(xiàn)代碼大家參考下本文2017-08-08
這篇文章主要為大家介紹了JS技巧動手實現(xiàn)紅包兔子雨效果示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)雙層嵌套菜單欄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
下面小編就為大家?guī)硪黄钊肜斫鈐s函數(shù)的作用域與this指向。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
這篇文章主要介紹了JavaScript oncopy事件用法實例解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-05-05
這篇文章主要介紹了JavaScript錯誤處理機(jī)制的相關(guān)資料，文中講解非常細(xì)致，幫助大家更好的理解和學(xué)習(xí)JavaScript，感興趣的朋友可以了解下2020-08-08
JS對HTML標(biāo)簽select的獲取、添加、刪除操作
HTML標(biāo)簽中的select在使用過程中很頻繁，在本文將為大家介紹下使用js是如何操作的，下面有個不錯的示例，感興趣的朋友不要錯過2013-10-10