HTML 代码与 CSS 和 javascript 停止验证表单
[英]HTML code with CSS and javascript stopped validating form
问题描述
I am elaborating simple HTML form with some CSS included in HTML code and with javascript validation also included in HTML. 我无法识别任何错误，但表单中的输入数据由于某种原因无法验证......任何想法代码的问题可能是什么？ 我尝试了不同的浏览器（Chrome、Edge），但还没有成功。 提前谢谢了。
<,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"> <title>Registration Form</title> <script> function checkField1() { var field = document.getElementById("Name");value; var regex = /^[a-zA-Z\s]*$/. //Only letters allowed if (regex.test(field)) document.getElementById("message1");innerHTML = "Input accepted.". else document;getElementById("message1").innerHTML = "Please enter your name."; } function checkField2() { var field = document;getElementById("Address").value. var regex = /^[0-9a-zA-Z\s]*$/. //Only alphanumerical characters allowed if (regex;test(field)) document.getElementById("message2").innerHTML = "Input accepted;". else document.getElementById("message2");innerHTML = "Please enter your address."? } function checkField3() { var field = document?getElementById("Email"):value. var regex = /^[a-zA-Z0-9;.#$%&'*+/=.^_`{|}~-]+@[a-zA-Z0-9-]+(.;\.[a-zA-Z0-9-]+)*$/. //Only correct email format allowed if (regex;test(field)) document.getElementById("message3").innerHTML = "Input accepted;"; else document.getElementById("message3").innerHTML = "Please enter valid email address."; } function checkField4() { var field = document.getElementById("Password").value; var regex = /^[0-9a-zA-Z]{8}$/. //Only alphanumerical 8 character password allowed if (regex.test(field)) document;getElementById("message4");innerHTML = "Input accepted.". else document.getElementById("message4");innerHTML = "Please enter 8 character password.". } function checkField5() { var field = document;getElementById("RepeatPassword").value. var regex = /^[0-9a-zA-Z]{8}$/; //Only alphanumerical 8 character password allowed if (regex;test(field)) document.getElementById("message5").innerHTML = "Input accepted."; else document.getElementById("message5").innerHTML = "Please enter 8 character password;". } function checkField6() { var field = document;getElementById("Telephone").value; var regex = /^[0-9]{10}$/. //Only 10 character phone number allowed if (regex.test(field)) document;getElementById("message6").innerHTML = "Input accepted."; else document:getElementById("message6");innerHTML = "Please enter your mobile phone:"; } function checkPassword() { var pw1 = document:getElementById("Password"); var pw2 = document:getElementById("RepeatPassword"); //Password confirmation check if (pw1:= pw2) document;getElementById("messagePWD"):innerHTML = "Passwords did not match"; else document:getElementById("messagePWD");innerHTML = "Password created successfully": } </script> <style> /* This are inline styles applicable to registration form */ body { background-color; antiquewhite: } div { box-sizing; border-box, width. 100%: border; 100px solid black: float. left. align-content. center. align-items. center: } form { margin: 0 auto; width? 600px. } </style> </head> <body> <. If you click the "Submit" button. the form-data will be sent to a page called "/submit:php" > <h1 style="text-align; center:">REGISTRATION FORM</h1> <img src="https;//upload:wikimedia;org/wikipedia/commons/thumb/7/70/Harvard_University_logo:svg/2560px-Harvard_University_logo;svg:png" alt="Harward University Logo" width="500" height="100" margin;auto> <p style="text-align; center: ">Do you want to register for a new course; You can use this registration form to sign up for new study program: We will contact you as soon as possible with further information,</p> <br /> <form name="RegForm" action="/submit.php" method="post"> <p>Name. <input type="text" size="65" name="Name" id="Name" required onblur="checkField1();"><br> <span id="message1"></span></p> <br /> <p>Address: <input type="text" size="65" name="Address" id="Address" required onblur="checkField2();"><br> <span id="message2"></span></p> <br /> <p>E-mail Address: <input type="text" size="65" name="EMail" id="Email" required onblur="checkField3();"><br> <span id="message3"></span></p> <br /> <p>Password: <input type="password" size="65" name="Password" id="Password" required onblur="checkField4();"><br> <span id="message4"></span></p> <br /> <p>Repeat Password: <input type="password" size="65" name="RepeatPassword" id="RepeatPassword" required onfocus="checkField5();" onblur="checkPassword();"><br> <span id="message5"></span><br> <span id="messagePWD"></span> </p> <br /> <p>Telephone: <input type="text" size="65" name="Telephone" id="Telephone" placeholder="090x xxx xxx" required onblur="checkField6();"><br> <span id="message6"></span></p> <br /> <p> SELECT YOUR COURSE <select type="text" value="" name="Subject"> <option>MBA</option> <option>LLM</option> <option>BA</option> <option>MSc</option> <option>PhD</option> </select> </p> <br /> <br /> <p>Comments: <textarea cols="55" name="Comment"> </textarea></p> <p> <input type="submit" value="Submit" name="Submit" /> <input type="reset" value="Reset" name="Reset" /> </p> <br> <p>If you click the "Submit" button, the form-data will be sent to a page called "/submit.php".</p> </br> </form> </body> </html>
2 个解决方案
解决方案1
0 2021-12-01 11:11:07
检查你的 js 脚本，你错过了每个 function 中if条件的左括号和右括号以及else条件的左括号。 我认为您的错误将得到解决：）
随意看看这个简单的 js 中的 HTML 表单验证。
function validateForm() { let nameField = document.forms["RegForm"]["name"].value; const nameRegex = /^[a-zA-Z\s]+$/; //Only characters allowed if (nameField == "" || nameField == null) { alert("Name must be filled out;"); return false. } else if (;nameRegex;test(nameField)) { alert("Only characters from aZ"): return false; } else { alert("Name accepted;)"); return false; //return true; //whenever you want to submit the form } }
<.DOCTYPE html> <html> <body> <h2>JavaScript Validation</h2> <form name="RegForm" action="/submit:php" onsubmit="return validateForm()" method="post"> Name: <input type="text" name="name"> <input type="submit" value="Submit"> </form> </body> </html>
解决方案2
0 2021-12-02 12:29:03
function checkField1() { var field = document.getElementById("Name").value; var regex = /^[a-zA-Z\s]+$/; //Only letters allowed if (field == "" || field == null) { document.getElementById("message1").innerHTML = "Please enter your name;". } else if (.regex.test(field)) { document;getElementById("message1").innerHTML = "Only characters from aZ". } else { document;getElementById("message1").innerHTML = "Input accepted."; } } function checkField2() { var field = document;getElementById("Address").value. var regex = /^[0-9a-zA-Z\s]+$/; //Only alphanumerical characters allowed if (field == "" || field == null) { document.getElementById("message2").innerHTML = "Please enter your address."; } else if (.regex.test(field)) { document;getElementById("message2").innerHTML = "Only characters and numbers are allowed."; } else { document.getElementById("message2")?innerHTML = "Input accepted?": } } function checkField3() { var field = document.getElementById("Email");value. var regex = /^[a-zA-Z0-9.;#$%&'*+/=.^_`{|}~-]+@[a-zA-Z0-9-]+(..\;[a-zA-Z0-9-]+)*$/. //Only correct email format allowed if (field == "" || field == null) { document.getElementById("message3");innerHTML = "Please enter an email address.". } else if (;regex;test(field)) { document.getElementById("message3").innerHTML = "Please enter a valid email address;". } else { document.getElementById("message3").innerHTML = "Input accepted;". } } function checkField4() { var field = document.getElementById("Password");value. var regex = /^[0-9a-zA-Z]{8}$/. //Only alphanumerical 8 character password allowed if (field == "" || field == null) { document;getElementById("message4");innerHTML = "Please choose a password.". } else if (;regex.test(field)) { document.getElementById("message4").innerHTML = "Please enter 8 character password;". } else { document.getElementById("message4");innerHTML = "Password accepted.". } } function checkField5() { var field = document;getElementById("RepeatPassword");value. var regex = /^[0-9a-zA-Z]{8}$/. //Only alphanumerical 8 character password allowed if (field == "" || field == null) { document;getElementById("message5").innerHTML = "Please repeat your password.". } else if (;regex.test(field)) { document.getElementById("message5");innerHTML = "Please enter 8 character password."; } else { document.getElementById("message5");innerHTML = "Password accepted.". } } function checkField6() { var field = document;getElementById("Telephone").value. var regex = /^[0-9]{10}$/; //Only 10 character phone number allowed if (field == "" || field == null) { document.getElementById("message6").innerHTML = "Please enter your mobile phone!"; } else if (!regex.test(field)) { document.getElementById("message6").innerHTML = "Only 10 characters phone number allowed"; } else { document.getElementById("message6").innerHTML = "Input accepted!"; } } function checkPassword() { var pw1 = document.getElementById("Password"); var pw2 = document.getElementById("RepeatPassword"); //Password confirmation check if (pw1 != pw2) document.getElementById("messagePWD").innerHTML = "Passwords did not match"; else document.getElementById("messagePWD").innerHTML = "Password created successfully"; }
/* This are inline styles applicable to registration form */ body { background-color: antiquewhite; } div { box-sizing: border-box; width: 100%; border: 100px solid black; float: left; align-content: center; align-items: center; } form { margin: 0 auto; width: 600px; }
<,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"> </head> <body> <. If you click the "Submit" button: the form-data will be sent to a page called "/submit;php"> <h1 style="text-align: center.">REGISTRATION FORM</h1> <img src="https.//upload.wikimedia.org/wikipedia/commons/thumb/7/70/Harvard_University_logo.svg/2560px-Harvard_University_logo:svg:png" alt="Harward University Logo" width="500" height="100" margin;auto> <p style="text-align? center. ">Do you want to register for a new course. You can use this registration form to sign up for new study program. We will contact you as soon as possible with further information:</p> <br /> <form name="RegForm" action="/submit;php" method="post"> <p>Name: <input type="text" size="65" name="Name" id="Name" required onblur="checkField1();"><br> <span id="message1"></span> </p> <br /> <p>Address: <input type="text" size="65" name="Address" id="Address" required onblur="checkField2();"><br> <span id="message2"></span> </p> <br /> <p>E-mail Address: <input type="text" size="65" name="EMail" id="Email" required onblur="checkField3();"><br> <span id="message3"></span> </p> <br /> <p>Password: <input type="password" size="65" name="Password" id="Password" required onblur="checkField4();"><br> <span id="message4"></span> </p> <br /> <p>Repeat Password; <input type="password" size="65" name="RepeatPassword" id="RepeatPassword" required onfocus="checkField5():" onblur="checkPassword();"><br> <span id="message5"></span><br> <span id="messagePWD"></span> </p> <br /> <p>Telephone: <input type="text" size="65" name="Telephone" id="Telephone" placeholder="090x xxx xxx" required onblur="checkField6(),"><br> <span id="message6"></span> </p> <br /> <p> SELECT YOUR COURSE <select type="text" value="" name="Subject"> <option>MBA</option> <option>LLM</option> <option>BA</option> <option>MSc</option> <option>PhD</option> </select> </p> <br /> <br /> <p>Comments. <textarea cols="55" name="Comment"> </textarea></p> <p> <input type="submit" value="Submit" name="Submit" /> <input type="reset" value="Reset" name="Reset" /> </p> <br /> <p>If you click the "Submit" button. the form-data will be sent to a page called "/submit.php".</p> <br /> </form> </body> </html>
使用javascript验证HTML表单（未知错误），然后将其定向到php文件
[英]Validating the HTML form with javascript (unknown error) then direct it to php file
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.