Web 表单用于收集用户的信息，例如姓名、电子邮件地址、位置、年龄等。
但有时用户不会输入预期的详细信息。
因此，在将表单数据发送到服务器端之前对其进行验证至关重要。
对于表单验证，客户端 JavaScript 可以帮助我们。
让我们创建 Javascript 代码来验证我们的表单。
在本例中，我们将验证姓名、密码、电子邮件、电话、主题和地址：
function ValidationForm() {
let username = document.forms["RegForm"]["Name"];
let email = document.forms["RegForm"]["Email"];
let phoneNumber = document.forms["RegForm"]["Telephone"];
let select = document.forms["RegForm"]["Subject"];
let pass = document.forms["RegForm"]["Password"];
if (username.value == "") {
alert("Please enter your name.");
username.focus();
return false;
}
if (email.value == "") {
alert("Please enter a valid e-mail address.");
email.focus();
return false;
}
if (email.value.indexOf("@", 0) < 0) {
alert("Please enter a valid e-mail address.");
email.focus();
return false;
}
if (email.value.indexOf(".", 0) < 0) {
alert("Please enter a valid e-mail address.");
email.focus();
return false;
}
if (phoneNumber.value == "") {
alert("Please enter your telephone number.");
phoneNumber.focus();
return false;
}
if (pass.value == "") {
alert("Please enter your password");
pass.focus();
return false;
}
if (select.selectedIndex < 1) {
alert("Please enter your course.");
select.focus();
return false;
}
return true;
}
这是完整的代码：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
.onitroad {
margin-left: 70px;
font-weight: bold;
text-align: left;
font-family: sans-serif, bold, Arial, Helvetica;
font-size: 14px;
}
.buttons {
display: flex;
align-items: center;
width: 100%;
}
div input {
margin-right: 10px;
}
form {
margin: 0 auto;
width: 600px;
}
form input {
padding: 10px;
}
form select {
background-color: #ffffff;
padding: 5px;
}
form label {
display: block;
width: 100%;
margin-bottom: 5px;
}
</style>
</head>
<body>
<h2 style="text-align: center"> Registration Form </h2>
<form name="RegForm" action="/form/submit.php" onsubmit="return ValidationForm()" method="post" class="onitroad">
<div>
<label for="Name">Name:</label>
<input type="text" id="Name" size="60" name="Name">
</div>
<br>
<div>
<label for="E-mail">E-mail Address:</label>
<input type="text" id="E-mail" size="60" name="Email">
</div>
<br>
<div>
<label for="Password">Password:</label>
<input type="text" id="Password" size="60" name="Password">
</div>
<br>
<div>
<label for="Telephone">Telephone: </label>
<input type="text" id="Telephone" size="60" name="Telephone">
</div>
<br>
<div>
<label>Select Book</label>
<select type="text" value="" name="Subject">
<option></option>
<option>HTML</option>
<option>CSS</option>
<option>PHP</option>
<option>JavaScript</option>
</select>
</div>
<br>
<div class="buttons">
<input type="submit" value="Send" name="Submit">
<input type="reset" value="Reset" name="Reset">
</div>
</form>
<script>
function ValidationForm() {
let username = document.forms["RegForm"]["Name"];
let email = document.forms["RegForm"]["Email"];
let phoneNumber = document.forms["RegForm"]["Telephone"];
let select = document.forms["RegForm"]["Subject"];
let pass = document.forms["RegForm"]["Password"];
if(username.value == "") {
alert("Please enter your name.");
username.focus();
return false;
}
if(email.value == "") {
alert("Please enter a valid e-mail address.");
email.focus();
return false;
}
if(email.value.indexOf("@", 0) < 0) {
alert("Please enter a valid e-mail address.");
email.focus();
return false;
}
if(email.value.indexOf(".", 0) < 0) {
alert("Please enter a valid e-mail address.");
email.focus();
return false;
}
if(phoneNumber.value == "") {
alert("Please enter your telephone number.");
phoneNumber.focus();
return false;
}
if(pass.value == "") {
alert("Please enter your password");
pass.focus();
return false;
}
if(select.selectedIndex < 1) {
alert("Please enter your course.");
select.focus();
return false;
}
return true;
}
</script>
</body>
</html>
表单验证在提交表单之前检查用户信息的准确性。
JavaScript 提供比服务器端验证更快的客户端表单验证。
服务器端验证需要更多的时间首先在服务器上进行，这需要在验证发生之前将用户的输入提交并发送到服务器。
因此，客户端验证有助于创建更好的用户体验。
许多开发人员更喜欢 JavaScript 表单验证。
日期：2020-06-02 22:16:05 来源：oir作者：oir