所以我做了一個代碼，讀取 html 中的名稱和密碼表單。在 java 腳本中，我撰寫了代碼以確保填寫名稱和密碼欄位。它還記錄了如果密碼值小于或等于 6，則會顯示一條訊息“密碼必須超過 6 個字符”，如果密碼值大于或等于 15 一條訊息將顯示“密碼必須小于 15 個字符”（額外：無論出于何種原因，當我輸入 6 個字符的密碼時，它會顯示該訊息，盡管我包含的操作員對于后者也是如此） .
這是 javascript 后跟的 HTML 代碼：
<!--Error container-->
<div id="error"></div>
<!--Form-->
<form id="form" action="/" method="GET">
<fieldset>
<!--Legend-->
<legend>Form: </legend>
<!--Name-->
<label for="name">Name:</label>
<input type="text" name="Name" id="name">
<br><br>
<!--Password-->
<label>Password: </label>
<input type="password" name="password" id="password">
<br><br>
<!--Submit and Reset Button-->
<input type="submit" Value="Submit">
<input type="reset" Value="Reset">
</fieldset>
</form>
<!--form-->
[填充文本：我認為我把問題寫得簡單易懂，因為它需要] 這是 javascript 部分。前四行從上面放置的 html 代碼中獲取 id，然后魔法從那里發生。
const name = document.getElementById('name')
const password = document.getElementById('password')
const form = document.getElementById('form')
const errorElement = document.getElementById('error')
form.addEventListener('submit', (e) =>{
let messages = []
if(name.value === '' || name.value == null){
messages.push("Name is required")
}
if(password.value.length <= 6){
messages.push("Password must be longer than 6 characters")
}
if(password.value.length >= 15){
messages.push("Password must be shorter than 15 characters")
}
if(messages.length > 0){
e.preventDefault()
errorElement.innerText = messages.join(', ')
}
e.preventDefault()
})
請堅持使用 Javascript 和 html 并感謝您抽出寶貴時間閱讀并提供幫助。
uj5u.com熱心網友回復：
只是一些小事：
<= 6是什么導致它在正好是 6 個字符時仍然顯示錯誤訊息。將其更新為< 6僅在密碼少于 6 個字符時顯示訊息（而不是小于或等于）- 即使在
e.preventDefault()錯誤檢查之外，仍在呼叫 - 陣列永遠不會重置，因此
messages即使用戶修復了所有錯誤，仍會阻止表單提交
這是一個更新的版本：
const name = document.getElementById('name')
const password = document.getElementById('password')
const form = document.getElementById('form')
const errorElement = document.getElementById('error')
form.addEventListener('submit', (e) =>{
let isValid = true;
let messages = []
if(name.value === '' || name.value == null){
messages.push("Name is required");
isValid = false;
} else if(password.value.length < 6){
messages.push("Password must be longer than 6 characters");
isValid = false;
} else if (password.value.length >= 15){
messages.push("Password must be shorter than 15 characters");
isValid = false;
}
if(!isValid){
e.preventDefault()
errorElement.innerText = messages.join(', ')
}
})<!--Error container-->
<div id="error"></div>
<!--Form-->
<form id="form" action="/" method="GET">
<fieldset>
<!--Legend-->
<legend>Form: </legend>
<!--Name-->
<label for="name">Name:</label>
<input type="text" name="Name" id="name">
<br><br>
<!--Password-->
<label>Password: </label>
<input type="password" name="password" id="password">
<br><br>
<!--Submit and Reset Button-->
<input type="submit" Value="Submit">
<input type="reset" Value="Reset">
</fieldset>
</form>
<!--form-->旁注：在現實生活中，您永遠不想限制用戶密碼的長度。讓他們隨心所欲地讓它變得強大。無論如何，您都會對其進行哈希處理，因此長度和特殊字符不會成為存盤問題。
uj5u.com熱心網友回復：
您的表單不會提交，因為您正在積極阻止它使用e.preventDefault()
如果沒有發生錯誤，我要么洗掉它，要么通過 JavaScript 觸發提交操作：
if (!messages) //the variable messages is empty, so there are no errors
form.submit() //submit the form
這也可能對您有所幫助： 如何使用 JavaScript 提交表單？
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/468490.html
標籤：javascript html