JS實現(xiàn)密碼框效果
更新時間：2020年09月10日 17:04:16 作者：Cathy _Mmm
這篇文章主要為大家詳細介紹了JS實現(xiàn)密碼框效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
在輸入密碼時，將密碼的長度設置為6-16，且在密碼長度出現(xiàn)小于6或是大于16時，會出現(xiàn)提示，效果如下圖
1. 此事件為失去焦點事件，當鼠標離開密碼框且點擊旁邊就會觸發(fā)事件
2. 輸入密碼會出現(xiàn)提示，事件發(fā)生與密碼的長度有關
3. 根據(jù)長度再來判斷該提示的消息與效果.
代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>密碼框</title>
<style type="text/css">
div{
width: 600px;
margin: 100px auto;
}
.massage{
background-image: url(gth.png);
background-repeat:no-repeat;
background-position: left center;
color:black;
display: inline-block;
padding-left: 20px;
}
.right{
background-image: url(right.png);
background-repeat: no-repeat;
color: green;
}
.wrong{
background-repeat: no-repeat;
background-image: url(wrong.png);
color: red;
}
</style>
</head>
<body>
<div class="register">
<input type="password" id="pwd">
<p class="massage">請輸入6-16位密碼</p>
</div>
<script>
var pwd=document.querySelector('#pwd');
var aa=document.querySelector('.massage');
pwd.onblur= function(){
if(this.value.length>16 || this.value.length<6){
aa.innerText='錯誤，請輸入6-16為密碼';
aa.className='massage wrong';
}else{
aa.className='massage right';
aa.innerText='密碼正確';
}
}
</script>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
本文給大家介紹基于JS+Canvas 實現(xiàn)下雨下雪效果，效果非常逼真，適應于各大網(wǎng)站，需要的朋友可以參考下2016-05-05
這篇文章主要介紹了微信小程序scroll-view隱藏滾動條的方法，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-03-03
接觸過相關知識的都知道，動態(tài)向DOM中添加js的script標簽時，在各種瀏覽器下會有不同的表現(xiàn)。2011-09-09
本文通過代碼實例給大家講解js讀取xml文件及jq讀取xml文件的方法，對本文感興趣的朋友一起學習吧2015-12-12
javascript發(fā)送短信驗證碼實現(xiàn)代碼
我們在注冊賬號，或者是參加活動時，都會向手機發(fā)送收短信驗證碼，短信驗證碼到底是如何實現(xiàn)的，本文為大家揭曉，并為大家分項1javascript發(fā)送短信驗證碼實現(xiàn)代碼，感興趣的小伙伴們可以參考一下2015-11-11
JS重寫Date函數(shù)以及兼容IOS系統(tǒng)
這篇文章主要介紹了JS重寫Date函數(shù)以及兼容IOS系統(tǒng),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了JS采用絕對定位實現(xiàn)回到頂部效果,以完整實例形式分析了JS定位到頁面頂部功能的實現(xiàn)方法,涉及javascript動態(tài)操作頁面元素與屬性的相關技巧,需要的朋友可以參考下2016-06-06
前端頁面適配之postcss-px-to-viewport實現(xiàn)步驟
postcss-px-to-viewport是一個PostCSS插件,它可以將px單位轉(zhuǎn)換為視口單位(vw、vh?或?vmin),這篇文章主要給大家介紹了關于前端頁面適配之postcss-px-to-viewport的實現(xiàn)步驟,需要的朋友可以參考下2024-03-03
這篇文章主要介紹了JS簡單判斷函數(shù)是否存在的方法,涉及javascript函數(shù)運行與類型判定相關操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2017-02-02
javascript實現(xiàn)了照片拖拽點擊置頂?shù)恼掌瑝Υa
這篇文章主要介紹了javascript實現(xiàn)了照片拖拽點擊置頂?shù)恼掌瑝Υa，效果非常不錯，這里推薦給大家，有需要的小伙伴可以參考下。2015-04-04