小贝子编程

带有CSS和javascript的HTML代码已停止验证表单



我正在阐述一个简单的HTML表单，HTML代码中包含一些CSS，HTML中也包含javascript验证。我无法识别任何错误，但由于某种原因，表单中的输入数据将无法验证。。。你知道代码可能有什么问题吗？我尝试了不同的浏览器(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-Zs]*$/; //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-Zs]*$/; //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>

检查您的js脚本，发现您在每个函数中都错过了if条件的左括号和右括号，以及else条件的右括号。我认为你的错误会得到解决：(

请随意查看js中的这个简单HTML表单验证。

function validateForm() {
let nameField = document.forms["RegForm"]["name"].value;
const nameRegex = /^[a-zA-Zs]+$/; //Only characters allowed
if (nameField == "" || nameField == null) {
alert("Name must be filled out!");
return false;
} else if (!nameRegex.test(nameField)) {
alert("Only characters from a-Z");
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>

function checkField1() {
var field = document.getElementById("Name").value;
var regex = /^[a-zA-Zs]+$/; //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 a-Z";
} else {
document.getElementById("message1").innerHTML = "Input accepted!";
}
}
function checkField2() {
var field = document.getElementById("Address").value;
var regex = /^[0-9a-zA-Zs]+$/; //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 python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium