1 回答

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>
添加回答
舉報