快捷導(dǎo)航

用JS實(shí)現(xiàn)簡單的登錄驗(yàn)證功能

更新時(shí)間：2017年07月28日 09:33:40 投稿：mrr

這篇文章主要介紹了用JS實(shí)現(xiàn)簡單的登錄驗(yàn)證功能，代碼簡單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的的朋友參考下吧

實(shí)現(xiàn)過程示意圖

這里寫圖片描述

代碼

<!DOCTYPE html>
  <html>
  <head>
  <meta charset="UTF-8">
  <title>登錄</title>
  <style>
    .ok {
      color: green;
      border: 1px solid green;
    }
    .error {
      color: red;
      border: 1px solid red;
    }
  </style>
  <script>
    //校驗(yàn)賬號(hào)的格式
    function check_code() {
      console.log(1);
      //獲取賬號(hào)
      var code =
        document.getElementById("code").value;
      //校驗(yàn)其格式(\w字母或數(shù)字或下劃線)
      var span =
        document.getElementById("code_msg");
      var reg = /^\w{6,10}$/;
      if(reg.test(code)) {
        //通過，增加ok樣式
        span.className = "ok";
      } else {
        //不通過，增加error樣式
        span.className = "error";
      }
    }
    function check_pwd(){
      console.log(2);
      var code2 =document.getElementById("pwd").value;
      var span2 =
        document.getElementById("pwd_msg");
      var reg2 = /^\w{6,10}$/;
      if(reg2.test(code2)) {
        span2.className = "ok";
      } else {
        span2.className = "error";
      }

    }
  </script>
  </head>
  <body>
    <form action="http://www.tmooc.cn">
      <p>
        賬號(hào)：
        <input type="text" id="code" onblur="check_code()"/>
        <span id="code_msg">6-10位字母、數(shù)字、下劃線</span>
      </p>
      <p>
        密碼：
        <input type="text" id="pwd" onblur="check_pwd()" />
        <span id="pwd_msg">8-20位字母、數(shù)字、下劃線</span>
      </p>
      <p><input type="submit" value="登錄"/></p>
    </form>
  </body>
  </html>

下面在看一段簡單的代碼關(guān)于javascript實(shí)現(xiàn)簡單的用戶登錄驗(yàn)證

代碼如下所示：

<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>Document</title>
 </head>
 <body>
   <script type="text/javascript">
     function check() {
    if(document.getElementById("username").value=="") {
        alert("沒有輸入用戶名！");
         return false;
      } else if(document.getElementById("password").value=="") {
        alert("沒有輸入密碼！");
        return false;
      } else {
        alert("提交成功！")
        return true;
       }
    }
   </script>
  <form name="form1">
   <input type="text" id="username">
  <input type="password" id="password" >
  <input type="submit" onclick="check()">
  </form>  
 </body>
 </html>

總結(jié)

以上所述是小編給大家介紹的用JS實(shí)現(xiàn)簡單的登錄驗(yàn)證功能，希望對(duì)大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

javascript嚴(yán)格模式詳解（含嚴(yán)格模式與非嚴(yán)格模式的區(qū)別）
這篇文章主要介紹了javascript嚴(yán)格模式詳解（含嚴(yán)格模式與非嚴(yán)格模式的區(qū)別）,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-11-11
javascript中undefined的本質(zhì)解析
這篇文章主要介紹了javascript中undefined的本質(zhì)解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-07-07
JavaScript前端中實(shí)現(xiàn)本地儲(chǔ)存的常用方式繪制
JavaScript本地存儲(chǔ)是Web開發(fā)中用于在客戶端存儲(chǔ)數(shù)據(jù)的重要技術(shù),本文為大家整理了一些常見方式及其區(qū)別和應(yīng)用場景,大家可以根據(jù)需求進(jìn)行選擇
2025-03-03
微信小程序使用Promise簡化回調(diào)
本篇文章主要介紹了微信小程序使用Promise簡化回調(diào)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-02-02
JavaScript MutationObserver實(shí)例講解
MutationObserver用來監(jiān)視DOM變動(dòng)。DOM的任何變動(dòng)，比如節(jié)點(diǎn)增減、屬性的變動(dòng)、文本內(nèi)容的變動(dòng)都會(huì)觸發(fā)MutationObserver事件，它與事件有一個(gè)本質(zhì)不同：事件是同步觸發(fā)，MutationObserver則是異步觸發(fā)，DOM的變動(dòng)并不會(huì)馬上觸發(fā)，而是要等到當(dāng)前所有DOM操作都結(jié)束才觸發(fā)
2022-12-12
JS結(jié)合WebSocket實(shí)現(xiàn)實(shí)時(shí)雙向通信
WebSocket 是一種在 Web 應(yīng)用程序中實(shí)現(xiàn)實(shí)時(shí)、雙向通信的協(xié)議,在本文中,我們將深入介紹 WebSocket 的原理、用法以及一些實(shí)際應(yīng)用場景,x需要的可以參考下
2023-11-11
JS的數(shù)組的擴(kuò)展實(shí)例代碼
從無憂轉(zhuǎn)過來的數(shù)組的擴(kuò)展，非常不錯(cuò)的把javascript數(shù)組的擴(kuò)展
2008-07-07
禁用頁面部分JavaScript方法的具體實(shí)現(xiàn)
方法重寫，重寫要禁用的方法，并讓它什么也不做，結(jié)果證明真的可行，但并不知道是不是一個(gè)科學(xué)的方法，我拿出來與大家共同討論一下
2013-07-07
javascript實(shí)現(xiàn)倒計(jì)時(shí)提示框
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)倒計(jì)時(shí)提示框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-03-03
JavaScript模擬實(shí)現(xiàn)自由落體效果
這篇文章主要為大家詳細(xì)介紹了JavaScript模擬實(shí)現(xiàn)自由落體效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-08-08