使用純 javascript 進行表單驗證的問題:(
[英]Problem with form validation using pure javascript :(
問題描述
目前，我正在處理一個包含四個字段的表單驗證項目。 我使用正則表達式來驗證輸入，但看起來有問題，因為每次我點擊提交按鈕時，表單都會驗證剛剛輸入的數據。 誰能幫我嗎？ 這是我的 html 和 javascript 代碼。
function validate () { const name = document.getElementById('name').value; const email = document.getElementById('email').value; const password = document.getElementById('password').value; const phone = document.getElementById('phone').value; const regEmail = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; const regpass = /^(?=.*\s)(?=.*[AZ])(?=.*[az])(?=.*[0-9]).{10,16}$/; const regphone =/^ (0|\+98)?([ ]|-|[()]){0,2}9[1|2|3|4]([ ]|-|[()]){0,2}(?:[0-9]([ ]|-|[()]){0,2}){8}/; const resultemail = regEmail.test('email'); const resultpass = regpass.test('password'); const resultphone = regphone.test('phone'); //conditions if(resultemail == false || resultemail == "") { document.getElementsByClassName('erroremail').innerHtml = "لطفا ایمیل را با فرمت صحیح وارد کنید"; return false; } else { document.getElementsByClassName('validemail').innerHtml= "ایمیل صحیح است"; } if(resultpass == false || resultpass == "") { document.getElementsByClassName('errorpass').innerHtml = "لطفا پسورد را با فرمت صحیح وارد کنید"; return false; } else { document.getElementsByClassName('erroremail').innerHtml = "پسورد صحیح است"; } if(resultphone == false || resultphone == "") { document.getElementsByClassName('errorphone').innerHtml = "شماره تلفن اجباری است"; return false; } else { document.getElementsByClassName('validphone').innerHtml = "شماره تلفن صحیح است"; } return true; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./style.css"> <title>Document</title> </head> <body> <form action="submit" method="get" onclick="validate()"> <div> <div><label for="name">Name:</label></div> <input type="text" id="name" placeholder="Enter your name here..."> <small class="errorname" style="color:red;"></small> <small class="validname" style="color: green;" ></small> </div> <div> <div><label for="email">email:</label></div> <input type="text" id="email" placeholder="Enter your email here..." > <small class="erroremail" style="color:red;"></small> <small class="validemail" style="color: green;" ></small> </div> <div> <div><label for="password">password:</label></div> <input type="text" id="password" placeholder="Enter your password here..." > <small class="errorpass" style="color:red;" ></small> <small class="validpass" style="color: green;" ></small> </div> <div> <div><label for="phone">Phone number:</label></div> <input type="text" id="phone" placeholder="Enter your phone number here..." > <small class="errorphone" style="color:red;" ></small> <small class="validphone" style="color: green;"></small> </div> <div> <input type="submit" value="submit" > </div> </form> <script src="./main.js" ></script> </body> </html>
1 個解決方案
解決方案1
0 2022-05-26 04:51:16
getElementsByClassName沒有對innerHTML的定義，因為getElementsByClassName返回一個NodeList對象而不是一個元素。 NodeList 本質上是元素的集合。
嘗試使用 getElementById ，因為它與您的代碼完美配合。 也不要忘記為small tags設置 id 。 示例是：
if (resultemail == false || resultemail == "") {
document.getElementById("erroremail").innerHTML = "test email";
return false;
}
或者如果需要在 class 下設置，可以使用以下代碼進行設置。
if (resultemail == false || resultemail == "") {
document.getElementsByClassName("erroremail")[0].innerHTML =
"لطفا ایمیل را با فرمت صحیح وارد کنید";
return false;
}
使用純JavaScript或純CSS將中心表格和div垂直和水平放置
[英]center form and div horizontally and vertically using pure javascript or pure css
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.