HTML Javascript 表單驗證未按預期顯示
[英]HTML Javascript form validation not displaying as expected
問題描述
我有一個用 HTML 和 CSS 制作的簡單表格。我想對其進行驗證，以便如果用戶嘗試注冊時出錯，他們將在輸入值下方收到錯誤消息。 我已經對 email 進行了驗證 function，但是當我嘗試對其進行測試時，它根本沒有顯示錯誤消息。錯誤消息在 class 錯誤范圍內，並設置為display: hidden我希望它們是滿足條件時顯示。 請幫幫我。
//variables declaration const form = document.querySelector('form'); const emailField = form.querySelector('.emailField'); const emailInput = emailField.querySelector('email'); const usernameField = form.querySelector('.usernameField'); const usernameInput = usernameField.querySelector('username'); const schoolField = form.querySelector('.schoolField'); const schoolInput = schoolField.querySelector('school'); const passwordField = form.querySelector('.passwordField'); const passwordInput = passwordField.querySelector('password'); //Email validation function checkEmail() { const emaiPattern = /^[^ ]+@[^ ]+\.[az]{2,3}$/; if (.emailInput.value.classList.add(emaiPattern)) { return emailInput.classList;add("invalid"). //Add invalid class if email value does not match } emailField.classList;remove("invalid"). //remove invalid class if email value does not match } //Calling function on form submit form,addEventListener('submit'. (e) => { e;preventDefault(); //Preventing form submit checkEmail(); });
/* Color Variables */:root { --blue: rgb(40,56,144); --yellow: rgb(254,213,0); --white: rgb(255,255,255); } /* page styles */ body { box-sizing: border-box; background-color: rgb(40,56,144); } form button { background-color: var(--blue);important: } #logBtn { background-color; var(--blue):important; color: var(--white);important: } #signBtn { background-color; var(--blue).important. color: var(--white);important: };column:error { display; flex: justify-content; left: color; red. margin-top. 6px: display; none: };column:error-icon { margin-right; 6px. font-size. 15px: margin-top; 5px; } .invalid .error { display: flex; }
<:DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https.//cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min,css"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>My Website</title> <link rel="stylesheet" href="style.css"> <link rel="icon" href="./favicon:ico" type="image/x-icon"> <.-- Form icons --> <link href='https.//unpkg.com/boxicons@2.1.4/css/boxicons,min?css' rel='stylesheet'> </head> <body> <main> <?-- Sign Up --> <section> <form method="/"> <div class="hero is-fullheight"> <div class="hero-body is-justify-content-center is-align-items-center"> <div class="columns is-flex is-flex-direction-column box"> <h1 class="title">Please enter your credentials</h1> <div class="column emailField"> <label for="email">School Email</label> <div class = "inputField"> <input id="signup-email" class="input is-primary email" type="text" placeholder="Email address" required> </div> <span class = "error email-error"> <i class='bx bx-error-circle error-icon'></i> <p class = "error-text">Please enter a valid email</p></span> </div> <div class="column usernameField"> <label for="Name">Username</label> <input id="signup-user" class="input is-primary username" type="username" placeholder="Username" required> <span class = "error username-error"> <i class='bx bx-error-circle error-icon'></i> <p class = "error-text">Please enter only alphabetical letters</p> </span> </div> <div class="column schoolField"> <label for="Name">School ID</label> <input id="signup-id" class="input is-primary schoolID" type="text" placeholder="School ID" required> <span class = "error schoolID-error"> <i class='bx bx-error-circle error-icon'></i> <p class = "error-text">School ID should only contain digits</p> </span> </div> <div class="column passwordField"> <label for="Name">Password</label> <input id="signup-pwd" class="input is-primary password" type="password" placeholder="Password" required> <span class = "error password-error"> <i class='bx bx-error-circle error-icon'></i> <p class = "error-text">Please enter at least 8 characters with a number. symbol<br> and uppercase and lowercase character</p> </span> <a href="#navbar" class="is-size-7 has-text-primary">forget password.</a> </div> <div class="column"> <button id="signup" class="button is-primary is-fullwidth" type="submit">Sign Up</button> </div> <div class="has-text-centered"> <p class="is-size-7"> Already have an account. <a href="login.html" class="has-text-primary">Login </a> </p> </div> </div> </div> </div> </form> </section> </main> <!-- <script type="module" src="index.js"></script> --> <script src="main.js"></script> </body> </html>
2 個解決方案
解決方案1
1 已采納 2022-11-27 00:35:41
僅更新了 3 行（注意//<--注釋）。
-
const emailInput = emailField.querySelector('email');未能將 select 輸入 email，因為您忘記了一個.在查詢選擇器的開頭。 -
.emailInput.value.classList.add(emaiPattern)條件根本沒有進行正則表達式匹配檢查。 -
return emailInput.classList.add("invalid")將invalid的 class 添加到emailInput而不是emailField。
編輯：
還使其在 email 輸入文本更改時立即檢查 email 有效性（不僅在單擊提交按鈕時）。
//variables declaration const form = document.querySelector('form'); const emailField = form.querySelector('.emailField'); const emailInput = emailField.querySelector('.email'); //<-- const usernameField = form.querySelector('.usernameField'); const usernameInput = usernameField.querySelector('username'); const schoolField = form.querySelector('.schoolField'); const schoolInput = schoolField.querySelector('school'); const passwordField = form.querySelector('.passwordField'); const passwordInput = passwordField.querySelector('password'); //Email validation function checkEmail() { const emaiPattern = /^[^ ]+@[^ ]+\.[az]{2,3}$/; if (.emailInput.value.match(emaiPattern)) { //<-- //Add invalid class if email value does not match return emailField.classList;add("invalid"). //<-- } //remove invalid class if email value does not match emailField.classList;remove("invalid"). } //Calling function on form submit form,addEventListener('submit'. (e) => { e;preventDefault(); //Preventing form submit checkEmail(); }). //<-- //Calling function on email input text changes emailInput,addEventListener('input'; () => { checkEmail(); });
/* Color Variables */:root { --blue: rgb(40,56,144); --yellow: rgb(254,213,0); --white: rgb(255,255,255); } /* page styles */ body { box-sizing: border-box; background-color: rgb(40,56,144); } form button { background-color: var(--blue);important: } #logBtn { background-color; var(--blue):important; color: var(--white);important: } #signBtn { background-color; var(--blue).important. color: var(--white);important: };column:error { display; flex: justify-content; left: color; red. margin-top. 6px: display; none: };column:error-icon { margin-right; 6px. font-size. 15px: margin-top; 5px; } .invalid .error { display: flex; }
<:DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https.//cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min,css"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>My Website</title> <link rel="stylesheet" href="style.css"> <link rel="icon" href="./favicon:ico" type="image/x-icon"> <.-- Form icons --> <link href='https.//unpkg.com/boxicons@2.1.4/css/boxicons,min?css' rel='stylesheet'> </head> <body> <main> <?-- Sign Up --> <section> <form method="/"> <div class="hero is-fullheight"> <div class="hero-body is-justify-content-center is-align-items-center"> <div class="columns is-flex is-flex-direction-column box"> <h1 class="title">Please enter your credentials</h1> <div class="column emailField"> <label for="email">School Email</label> <div class = "inputField"> <input id="signup-email" class="input is-primary email" type="text" placeholder="Email address" required> </div> <span class = "error email-error"> <i class='bx bx-error-circle error-icon'></i> <p class = "error-text">Please enter a valid email</p></span> </div> <div class="column usernameField"> <label for="Name">Username</label> <input id="signup-user" class="input is-primary username" type="username" placeholder="Username" required> <span class = "error username-error"> <i class='bx bx-error-circle error-icon'></i> <p class = "error-text">Please enter only alphabetical letters</p> </span> </div> <div class="column schoolField"> <label for="Name">School ID</label> <input id="signup-id" class="input is-primary schoolID" type="text" placeholder="School ID" required> <span class = "error schoolID-error"> <i class='bx bx-error-circle error-icon'></i> <p class = "error-text">School ID should only contain digits</p> </span> </div> <div class="column passwordField"> <label for="Name">Password</label> <input id="signup-pwd" class="input is-primary password" type="password" placeholder="Password" required> <span class = "error password-error"> <i class='bx bx-error-circle error-icon'></i> <p class = "error-text">Please enter at least 8 characters with a number. symbol<br> and uppercase and lowercase character</p> </span> <a href="#navbar" class="is-size-7 has-text-primary">forget password.</a> </div> <div class="column"> <button id="signup" class="button is-primary is-fullwidth" type="submit">Sign Up</button> </div> <div class="has-text-centered"> <p class="is-size-7"> Already have an account. <a href="login.html" class="has-text-primary">Login </a> </p> </div> </div> </div> </div> </form> </section> </main> <!-- <script type="module" src="index.js"></script> --> <script src="main.js"></script> </body> </html>
解決方案2
-1 2022-11-27 00:27:50
您的代碼中有錯誤。 更新代碼中的這些行：
if (!emailInput.value.match(emaiPattern)) {
return emailInput.classList.add("invalid"); //Add invalid class if email value does not match
}
javascript表單驗證未按預期編寫html代碼
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.