极客笔记使用HTML和JavaScript进行表单验证
通常，表单用于收集特定个人的信息。比如说你在预订飞机票时，可能会被要求填写一个包括姓名、年龄、电话号码、地址等个人信息的表单。总体来说，表单是一种以有组织的方式从人们那里收集信息的工具。
在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>
抱歉，选项中没有提供英文内容供翻译。请提供英文内容以便我进行翻译。将上述表格中的所有字段都需要一个记录，并且它应该是所需的模式。如果您错过了任何字段，您将无法继续并提交。