使用 HTML 和 JavaScript 进行表单验证
htmljavascriptweb developmentfront end technology更新于 2025/2/23 10:52:17
一般来说，表单用于收集特定人员的信息。假设您正在预订机票，您可能被要求填写一份表格，其中询问您的个人信息，如姓名、年龄、电话号码、地址等。总的来说，表单是一种用于以井然有序的方式从人们那里收集信息的工具。
在 HTML 中，我们可以创建表单来收集用户的数据并将其发送到 Web 服务器。可以使用 HTML <form> 标记创建表单，并且可以包含各种输入元素，例如文本框、下拉菜单、单选按钮、日期选择器和复选框等。每当用户在表单中输入所有数据并提交时，它将被发送到服务器进行处理。这允许网站存储数据、创建用户帐户等。
以下是先决条件 −
使用 HTML，我们可以创建表单。
使用 CSS，我们可以设置表单样式。
使用 JavaScript，我们可以验证表单。
使用 JavaScript 进行验证
验证表单非常重要，因为用户输入的数据应采用正确的格式。例如，考虑一个使用表单收集用户数据的应用程序。此类表单包含一些必须填写用户数据的字段(如姓名、电子邮件、手机号码等)；但也存在一些可选输入数据的字段(如安全问题、备用电子邮件等)。这是使用表单验证完成的。
示例
在下面的示例中，我们使用 HTML 和 CSS 创建并设置了表单样式，并使用 JavaScript 验证了表单字段。
<html>
<head>
<title>Form validation using HTML and JavaScript</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@800&display=swap" rel="stylesheet">
<!-- FOLLOWING IS THE CSS CODE-->
<style>
body {
font-family: 'Montserrat', sans-serif;
}
h2 {
display: flex;
justify-content: center;
color: green;
margin-left: 1px;
}
form {
max-width: 500px;
margin: 0 auto;
padding: 20px;
border: 2px solid #ccc;
border-radius: 10px;
background-color: #f5f5f5;
}
label {
display: block;
font-weight: bold;
margin-bottom: 10px;
}
input[type="text"],
input[type="email"],
input[type="tel"] {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: 1px solid grey;
border-radius: 5px;
box-sizing: border-box;
}
input[type="submit"] {
background-color: #4CAF50;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #3e8e41;
}
.submit-box {
text-align: center;
position: relative;
display: flex;
align-items: center;
justify-content: center;
margin-top: 20px;
}
div {
position: relative;
display: flex;
font-size: small;
}
</style>
</head>
<!-- FOLLOWING IS THE HTML CODE-->
<body>
<h2>Form validation using HTML and JavaScript</h2>
<form id="form" onsubmit="validateForm()">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<br>
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="abc@xyz.com">
<br>
<br>
<label for="phone">Phone:</label>
<input type="tel" id="phone" name="phone" placeholder="1234567890" pattern="[0-9]{10}">
<br>
<br>
<label for="phone">Address:</label>
<textarea name="address" id="add" cols="65"></textarea>
<div class="submit-box">
<input type="submit" value="Submit">
</div>
</form>
<!-- FOLLOWING IS THE JAVASCRIPT CODE-->
<script>
function validateForm() {
var name = document.forms["form"]["name"].value;
var email = document.forms["form"]["email"].value;
var phone = document.forms["form"]["phone"].value;
var add = document.getElementById('add').value;
if (name == "") {
alert("Please enter your NAME to proceed further...");
return false;
}
if (!isNaN(name)) {
alert("please enter valid name...");
return false;
}
if (email == "") {
alert("Please enter valid EMAIL to proceed further...");
return false;
}
if (phone == "") {
alert("Please enter your CONTACT number to proceed further...");
return false;
}
if (isNaN(phone)) {
alert("Invalid CONTACT number");
return false;
}
if (add == '') {
alert("Please Provide address!");
return false;
}
}
</script>
</body>
</html>
在上述表单中，所有字段都需要一条记录，并且应符合要求的格式。如果您遗漏了任何字段，则无法继续提交。
