欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript實(shí)現(xiàn)密碼框輸入驗(yàn)證

 更新時(shí)間：2021年09月30日 17:22:27   作者：qq_39111074  
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)密碼框輸入驗(yàn)證，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

有時(shí)需要在前端頁面，用戶輸入時(shí)先進(jìn)行簡單的驗(yàn)證，減少服務(wù)器壓力

例如，限定了字段的輸入長度：

輸入框后有輸入范圍提示信息
輸入錯(cuò)誤長度的話，變成錯(cuò)誤提示信息
輸入正確長度的話，顯示正確提示信息

實(shí)現(xiàn)思路

1、先寫出輸入提示信息，
2、定義錯(cuò)誤和正確的類，寫出相應(yīng)樣式
3、獲取輸入框元素對象，if語句對屬性值進(jìn)行長度判斷，根據(jù)不同結(jié)果，顯示不同的提示信息內(nèi)容，設(shè)置不同的提示信息類名- - -以切換樣式

示例代碼

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>密碼框輸入提示</title>
    <style>
        div {
            width: 600px;
            margin: 100px auto;
        }
        
        input {
            outline: none;
        }
        
        .message {
            display: inline-block;
            font-size: 12px;
            color: #999;
            background: url(images/提示.png) no-repeat left center/16px 16px;
            padding-left: 20px;
        }
        
        .wrong {
            background-image: url(images/錯(cuò)誤.png);
            color: red;
        }
        
        .right {
            background-image: url(images/正確.png);
            color: green;
        }
    </style>
</head>

<body>
    <div class="register">
        <input type="password" class="inp">
        <p class="message">請輸入8~18位密碼</p>
    </div>
    <script>
        var password = document.querySelector('.inp');
        var message = document.querySelector('.message');

        password.onblur = function() {
            if (this.value.length < 8 || this.value.length > 18) {
                message.innerHTML = '密碼長度錯(cuò)誤，應(yīng)為8~18位';
                message.className = 'message wrong';
            } else {
                message.innerHTML = '密碼長度正確';
                message.className = 'message right';
            }
        }
    </script>
</body>

</html>

頁面效果：

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • JS 頁面內(nèi)容搜索，類似于 Ctrl+F功能的實(shí)現(xiàn)代碼

    JS 頁面內(nèi)容搜索，類似于 Ctrl+F功能的實(shí)現(xiàn)代碼

    JS 頁面內(nèi)容搜索，類似于 Ctrl+F功能的實(shí)現(xiàn)代碼...
    2007-08-08
  • JavaScript前端實(shí)現(xiàn)壓縮圖片功能

    JavaScript前端實(shí)現(xiàn)壓縮圖片功能

    這篇文章主要介紹了JavaScript前端實(shí)現(xiàn)壓縮圖片功能，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-03-03
  • JavaScript中const關(guān)鍵字的用法及特性

    JavaScript中const關(guān)鍵字的用法及特性

    該文章講解了JavaScript中const關(guān)鍵字的用法以及它的一些特性，該關(guān)鍵字用于創(chuàng)建常量，即一旦賦值之后就不能再修改，但是，使用?const創(chuàng)建的對象和數(shù)組卻可以被修改，本文通過講解“賦值”和“變異”之間的重要區(qū)別，詳細(xì)解釋了這一現(xiàn)象,需要的朋友可以參考下
    2023-05-05
  • js判斷鼠標(biāo)左、中、右鍵哪個(gè)被點(diǎn)擊的方法

    js判斷鼠標(biāo)左、中、右鍵哪個(gè)被點(diǎn)擊的方法

    這篇文章主要介紹了js判斷鼠標(biāo)左、中、右鍵哪個(gè)被點(diǎn)擊的方法,主要通過event.button事件來判斷鼠標(biāo)點(diǎn)擊的類型,需要的朋友可以參考下
    2015-01-01
  • 微信小程序?qū)崿F(xiàn)左滑修改、刪除功能

    微信小程序?qū)崿F(xiàn)左滑修改、刪除功能

    這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)左滑修改、刪除功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2018-10-10
  • javascript控制層顯示或隱藏的方法

    javascript控制層顯示或隱藏的方法

    這篇文章主要介紹了javascript控制層顯示或隱藏的方法,涉及javascript操作頁面元素樣式的相關(guān)技巧,非常簡單實(shí)用,需要的朋友可以參考下
    2015-07-07
  • 一篇文章教你寫出干凈的JavaScript代碼

    一篇文章教你寫出干凈的JavaScript代碼

    JavaScript一種直譯式腳本語言,是一種動(dòng)態(tài)類型、弱類型、基于原型的語言,內(nèi)置支持類型,下面這篇文章主要給大家介紹了如何通過一篇文章教你寫出干凈的JavaScript代碼,需要的朋友可以參考下
    2021-09-09
  • three.js實(shí)現(xiàn)炫酷的全景3D重力感應(yīng)

    three.js實(shí)現(xiàn)炫酷的全景3D重力感應(yīng)

    這篇文章主要為大家詳細(xì)介紹了three.js實(shí)現(xiàn)炫酷的全景3D重力感應(yīng)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2018-12-12
  • js實(shí)現(xiàn)復(fù)制粘貼的兩種方法

    js實(shí)現(xiàn)復(fù)制粘貼的兩種方法

    這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)的兩種方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2020-12-12
  • js輪播圖代碼分享

    js輪播圖代碼分享

    這篇文章主要為大家詳細(xì)介紹了js輪播圖代碼，代碼簡潔，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2016-07-07

最新評論