JavaScript實現密碼框驗證資訊

阿新 • • 發佈：2021-11-12

本文例項為大家分享了實現密碼框驗證資訊的具體程式碼，供大家參考，具體內容如下

JavaScript實現密碼框驗證資訊

效果展示：

JavaScript實現密碼框驗證資訊

程式碼展示

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" type="text/" href="fontss2/iconfont.css" rel="external nofollow" />
  <style>
   .orginal {
    font-size: 13px;
    color: dee 
pskyblue;
   }
   .wrongwww.cppcns.com {
    font-size: 13px;
    color: red;  
   }
   .right {
    font-size: 13px;www.cppcns.com
    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>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。

JavaScript實現密碼框驗證資訊

本文例項為大家分享了實現密碼框驗證資訊的具體程式碼，供大家參考，具體內容如下

基於JavaScript實現密碼框驗證資訊

本文例項為大家分享了實現密碼框驗證資訊的具體程式碼，供大家參考，具體內容如下

JavaScript實現密碼框輸入驗證

有時需要在前端頁面，使用者輸入時先進行簡單的驗證，減少伺服器壓力例如，限定了欄位的輸入長度：

短視訊原始碼，密碼框驗證資訊文字提示

短視訊原始碼，密碼框驗證資訊文字提示實現的相關程式碼案例分析： 1.首先判斷的事件是表單失去焦點onblur

JavaScript實現密碼強度實時驗證

JavaScript實現密碼強度實時驗證，供大家參考，具體內容如下在網路服務中，為了保證使用者的私密資訊足夠安全，會要求使用者輸入具有一定安全級別的密碼，這樣可以更好的防止他人盜用。比如在註冊一些遊戲賬號時，

原生js實現密碼強度驗證功能

我們在填寫表單的時候，特別是輸入密碼的時候，經常看到實時顯示密碼強度的效果，那麼這種效果如何通過我們的原生js實現呢？

JS實現密碼框效果

在輸入密碼時，將密碼的長度設定為6-16，且在密碼長度出現小於6或是大於16時，會出現提示，效果如下圖

android實現密碼框右側顯示小眼睛

本文例項為大家分享了android實現密碼框右側顯示小眼睛的具體程式碼，供大家參考，具體內容如下

JavaScript實現表單驗證功能

本文例項為大家分享了JavaScript實現表單驗證功能的具體程式碼，供大家參考，具體內容如下

用Javascript實現傳送簡訊驗證碼間隔功能

在很多app和網站中，我們登陸或者註冊賬號，會有一個傳送簡訊驗證碼的地方1，然而為了防止惡意獲取驗證碼，我們一般都設定了可點選的時間間隔，時間間隔1完了過後，便又可以繼續傳送，接下來用程式碼實現

用Javascript實現傳送簡訊驗證碼間隔

技術標籤：JSjavascriptcsshtmlhtml5 用Javascript實現傳送簡訊驗證碼間隔正在學習大前端中，有程式碼和思路不規範不正確的地方往多多包涵，感謝指教

JavaScript實現頁面動態驗證碼的實現示例

引言：現在很多在使用者登陸或註冊的時候為了防止程式攻擊，加入了動態驗證的技術，一般是讓使用者輸入隨即生成的驗證碼來實現。我自己寫了一個沒有跟後臺互動的，就在前端驗證，發出來給大家看看。

JavaScript實現隨機生成驗證碼及校驗

本文例項為大家分享了javascript實現隨機生成驗證碼及校驗的具體程式碼，供大家參考，具體內容如下

JavaScript實現訊息框示例

在SUQTvicript 中可以建立三種訊息框：警告框、確認框、提示框。警告框警告框通常用於確保使用者可以得到某些資訊。

javascript實現輸入框內容提示及隱藏功能

有時輸入框較小，希望輸入內容後，出現一個有放大輸入內容的提示框實現思路

Javascript實現登入框拖拽效果

本文例項為大家分享了實現登入框拖拽效果的具體程式碼，供大家參考，具體內容如下

JavaScript實現滑塊驗證碼

本文例項為大家分享了實現滑塊驗證碼的具體程式碼，供大家參考，具體內容如下

JavaScript實現滑塊驗證案例

本文例項為大家分享了實現滑塊驗證的具體程式碼，供大家參考，具體內容如下

JavaScript實現登入註冊驗證

學習需要堅持，墮落了一星期，學也不是，玩也不對，今天終於跑到圖書館來學習。

JavaScript實現PC端四格密碼輸入框功能

本文例項為大家分享了JavaScript實現PC端四格密碼輸入框的具體程式碼，供大家參考，具體內容如下