第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

構(gòu)建了一個登錄表單腳本,但它不能使用 JavaScript

構(gòu)建了一個登錄表單腳本,但它不能使用 JavaScript

慕哥6287543 2021-12-23 10:30:12
我正在嘗試構(gòu)建一個 login.js 腳本來監(jiān)聽登錄表單提交事件。當我嘗試運行我的代碼時,它沒有登錄或正常工作我正在使用要求使用的 JavaScript。我用 HTML 構(gòu)建了登錄表單,并在 JavaScript 中研究了登錄功能。它不能是內(nèi)聯(lián) JavaScript,它必須是一個獨立于 HTML 的腳本。var count = 2;function validate() {  var un = document.login.username.value;  var pw = document.login.password.value;  var valid = false;  var usernameArray = ["adrian@tissue.com",    "dduzen1@live.spcollege.edu",    "deannaduzen@gmail.com"  ]  var passwordArray = ["welcome1", "w3lc0m3", "ch1c@g0"]  for (var i = 0; i < usernameArray.length; i++) {    if ((un == usernameArray[i]) && (pw == passwordArray[i])) {      valid = true;      break;    }  }  if (valid) {    alert("Login is successful");    window.location = "index.html";    return false;  }  var again = "tries";  if (count == 1) {    again = "try"  }  if (count >= 1) {    alert("Wrong username or password")    count--;  } else {    alert("Incorrect username or password, you are now blocked");    document.login.username.value = "You are now blocked";    document.login.password.value = "You are now blocked";    document.login.username.disabled = true;    document.login.password.disabled = true;    return false;  }}<!-- start of login form --><div class="login-page">  <div class="form">    <form class="register-form" onsubmit="return validate() ;" method="post">      <input type="text" placeholder="username" />      <input type="text" placeholder="password" />      <input type="text" placeholder="email id" />      <button>Create</button>      <p class="message">Already registered? <a href="#">Login</a>      </p>    </form>    <form class="login-form">      <input type="text" placeholder="username" />      <input type="text" placeholder="password" />      <button>login</button>      <p class="message">Not registered? <a href="#">Register</a>      </p>    </form>  </div></div>它需要允許我在代碼中輸入的三個登錄信息才能登錄該站點。登錄時,它閃爍,好像在做某事,但不會去任何地方,也不表明該人已登錄。
查看完整描述

1 回答

?
烙印99

TA貢獻1829條經(jīng)驗 獲得超13個贊

您沒有使用返回語句正確驗證,您的onsubmit屬性也在注冊表中。


在表單上使用名稱屬性

這將幫助您使用 JavaScript 輕松識別表單和輸入,否則您可能無法識別較大表單中的哪個輸入。


<form name="login" class="login-form">

  <input name="user" type="text" placeholder="username" />

  <input name="pass" type="text" placeholder="password" />

  <button>login</button>

  <p class="message">Not registered? <a href="#">Register</a>

  </p>

</form>

將此應用于您的登錄表單后,您可以通過執(zhí)行document.login.


在 JavaScript 中利用原生 HTML 事件

您檢索用戶名和密碼的方式非常復雜,您可以在 JavaScript 中添加一個事件偵聽器并處理其中的所有內(nèi)容:


const loginForm = document.login;

loginForm.addEventListener("submit", validate);

這將在validate每次提交表單時調(diào)用。此外,它將事件作為參數(shù)發(fā)送,因此您可以在函數(shù)中像這樣接收它:


function validate(event) {

  event.preventDefault(); // Stop form redirection

  let user = event.target.user.value,

      pass = event.target.pass.value;

  // REST OF THE CODE ...

}

這更容易,因為我們向輸入添加了名稱屬性,因此我們可以通過user和來識別它們pass。


驗證

注意:我不建議直接在瀏覽器中驗證 username:password 數(shù)據(jù),因為這是一個很大的漏洞,必須在服務器端驗證。


您可以通過將用戶名與其密碼綁定在一個對象中來簡化此驗證,而不是創(chuàng)建兩個數(shù)組:


const accounts = {

  "adrian@tissue.com": "welcome1",

  "dduzen1@live.spcollege.edu": "w3lc0m3",

  "deannaduzen@gmail.com": "ch1c@g0"

};

然后,將輸入值保存在user和pass變量中,您可以執(zhí)行以下操作:


if (accounts[user] == pass) {

    //SUCCESSFUL LOGIN

    console.log('Correct. Logged in!');

  } else {

    //WRONG LOGIN CREDENTIALS

    attempts--;

    validateAttempts();

}

為了避免看到大量代碼,您應該創(chuàng)建另一個函數(shù),它的唯一工作是驗證是否應該阻止用戶。


結(jié)果

我應該提到,這僅適用于驗證用戶表單,如果您需要保存會話并保持用戶登錄,則必須使用服務器端語言。


我給你留下了所有這些變化都有效的片段,你自己看看:


const accounts = {

  "adrian@tissue.com": "welcome1",

  "dduzen1@live.spcollege.edu": "w3lc0m3",

  "deannaduzen@gmail.com": "ch1c@g0"

};

const loginForm = document.login;


let attempts = 3;

loginForm.addEventListener("submit", validate);


function validate(event) {

  event.preventDefault();

  let user = event.target.user.value,

      pass = event.target.pass.value;


  if (accounts[user] == pass) {

    //SUCCESSFUL LOGIN

    console.log('Correct. Logged in!');

  } else {

    console.log('Wrong username or password.');

    attempts--;

    validateAttempts()

  }

}


function validateAttempts() {

  if (attempts <= 0) {

    console.log("You are now blocked");

    loginForm.user.value = "You are now blocked";

    loginForm.pass.value = "You are now blocked";

    loginForm.user.disabled = true;

    loginForm.pass.disabled = true;

  }

}

<form name="login" class="login-form">

  <input name="user" type="text" placeholder="username" />

  <input name="pass" type="text" placeholder="password" />

  <button>login</button>

  <p class="message">Not registered? <a href="#">Register</a>

  </p>

</form>


查看完整回答
反對 回復 2021-12-23
  • 1 回答
  • 0 關(guān)注
  • 105 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號