基于JavaScript實(shí)現(xiàn)密碼框驗(yàn)證信息
更新時(shí)間：2021年11月11日 08:58:40 作者：前端小歌謠
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)密碼框驗(yàn)證信息，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)密碼框驗(yàn)證信息的具體代碼，供大家參考，具體內(nèi)容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 600px;
margin: 100px auto;
}
.message {
display: inline-block;
font-size: 12px;
color: #999;
background: url(./img/1.png) no-repeat left center;
padding-left: 10px;
}
.wrong {
color: red;
background-image: url(img/2.png);
}
.right {
color: green;
background-image: url(img/3.png);
}
</style>
</head>
<body>
<div class="register">
<input type="password" class="ipt">
<p class="message">請(qǐng)輸入6-16位密碼</p>
</div>
<script>
//獲取元素
var ipt = document.querySelector('.ipt');
var message = document.querySelector('.message');
//注冊(cè)事件
ipt.onblur = function() {
//根據(jù)表單的值的長(zhǎng)度
if (this.value.length < 6 || this.value.length > 16) {
message.className = 'message wrong';
message.innerHTML = '你輸入的位數(shù)不對(duì)';
} else {
message.className = 'message right';
message.innerHTML = '輸入正確';
}
}
</script>
</body>
</html>
運(yùn)行結(jié)果
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- JavaScript實(shí)現(xiàn)輸入框(密碼框)出現(xiàn)提示語(yǔ)
- JS實(shí)現(xiàn)密碼框的顯示密碼和隱藏密碼功能示例
- 基于JS實(shí)現(xiàn)密碼框(password)中顯示文字提示功能代碼
- js實(shí)現(xiàn)input密碼框顯示/隱藏功能
- js實(shí)現(xiàn)input密碼框提示信息的方法(附html5實(shí)現(xiàn)方法)
- JavaScript如何實(shí)現(xiàn)在文本框(密碼框)輸入提示語(yǔ)
- JS實(shí)現(xiàn)表單中點(diǎn)擊小眼睛顯示隱藏密碼框中的密碼
- javascript 密碼框防止用戶粘貼和復(fù)制的實(shí)現(xiàn)代碼
- js正則實(shí)現(xiàn)的密碼框簡(jiǎn)單制作,還可以替換成自己想用得符號(hào)
- JS實(shí)現(xiàn)密碼框效果
相關(guān)文章
廢話少說(shuō)，直接上Code,對(duì)IE與FF下的差異，均在代碼中有相關(guān)的注解2010-03-03
jquery 實(shí)現(xiàn)上下滾動(dòng)效果示例代碼
上下滾動(dòng)的效果，不用說(shuō)，大家都有看到過(guò)，本文為大家介紹下使用jquery實(shí)現(xiàn)上下滾動(dòng)效果，感興趣的朋友可以參考下，希望對(duì)大家有所幫助2013-08-08
2008-02-02
websocket是H5才開(kāi)始提供的一種在單個(gè)TCP連接上進(jìn)行全雙工通訊的協(xié)議,下面這篇文章主要給大家介紹了關(guān)于JS前端中WebSocket使用的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-03-03
Js 隨機(jī)數(shù)產(chǎn)生6位數(shù)字
Js隨機(jī)產(chǎn)生6為數(shù)字的代碼，需要的朋友可以參考下。2010-05-05
深入理解JavaScript中的尾調(diào)用(Tail Call)
尾調(diào)用（Tail Call）是函數(shù)式編程的一個(gè)重要概念，下面這篇文章主要給大家深入的介紹了關(guān)于JavaScript中尾調(diào)用的相關(guān)資料，文中介紹的非常詳細(xì)，相信對(duì)大家具有一定的參考價(jià)值，有需要的朋友們下面來(lái)一起看看吧。2017-02-02
JavaScript用JQuery呼叫Server端方法示例代碼
這篇文章主要介紹了JavaScript用JQuery呼叫Server端方法,需要的朋友可以參考下2014-09-09
微信小程序三級(jí)聯(lián)動(dòng)選擇器使用方法
這篇文章主要為大家詳細(xì)介紹了微信小程序三級(jí)聯(lián)動(dòng)選擇器使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-02-02
Javascript 中的 && 和 || 使用小結(jié)
Javascript 中的 && 和 || ，有時(shí)候用作條件判斷，非常的簡(jiǎn)潔，不熟悉的朋友可能不太了解，這里最后有個(gè)朋友補(bǔ)充，非常的好。2010-04-04
這篇文章主要介紹了JS 獲取鼠標(biāo)左右鍵的鍵值方法，很簡(jiǎn)單，但很實(shí)用，特別是在做與用戶交互相關(guān)的東西2014-10-10