使用HTML和JavaScript进行表单验证




使用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>

抱歉,选项中没有提供英文内容供翻译。请提供英文内容以便我进行翻译。将上述表格中的所有字段都需要一个记录,并且它应该是所需的模式。如果您错过了任何字段,您将无法继续并提交。



JavaScript 精选笔记
如何在JavaScript中显示下拉列表中的选定选项如何使用JavaScript DOM添加表格行JavaScript的优缺点如何在JavaScript中停止forEach()方法如何使用JavaScript改变文本的字体颜色如何将本地JSON文件数据导入到我的JavaScript变量如何使用JavaScript在按钮上添加onclick事件?如何在JavaScript中调用返回另一个函数的函数从JSON对象转换为JavaScript中的数组如何使用JavaScript隐藏HTML元素如何使用JavaScript从*.CSV文件中读取数据如何使用JavaScript在5秒后重定向网页如何在ReactJS中验证手机号长度如何在ReactJS中验证电子邮件如何在ReactJS中验证日期如何在ReactJS中去除输入的空白字符如何在ReactJS中使用setState更新对象如何使用JavaScript重置或清除表单?如何使用JavaScript创建一个换行?如何在页面加载时调用JavaScript函数?如何使用HTML按钮调用JavaScript函数?如何在HTML中使文本加粗如何在JavaScript中检查复选框是否被选中?如何在HTML中更改文字字体?如何在JavaScript中删除现有的HTML元素?如何使用JavaScript停止表单提交?如何去除 JavaScript 数字的小数部分?如何在JavaScript中使用前导零填充数字?JavaScript中将字符串转换为数组如何使用JavaScript判断一个数是奇数还是偶数?如何通过JavaScript检测移动设备?JavaScript Sleep() 函数如何使用Javascript读写文件使用event.preventDefault()在表单提交时停止页面刷新如何向JavaScript对象添加元素?如何在JavaScript数组中查找重复值?如何在JavaScript中向HTML DOM添加新元素?如何在JavaScript中创建自定义的提示框?使用HTML和JavaScript进行表单验证如何在HTML中更改字体大小?JavaScript的替代方案使用HTML、CSS和JavaScript创建可悬停的侧边导航如何在JavaScript中将字符串转换为整数?将字符串左旋转和右旋转相匹配的JavaScript程序以最小化改变的字符JavaScript 找出最大的连续递减元素JavaScript 使用默认值将数组映射到一个新数组JavaScript 操作对象数组JavaScript 通过Array对象列表来操作对象进行分组JavaScript 创建另一个数组的重复值数组JavaScript JSON组对象JavaScript 在已排序列表中搜索项目的最佳方法是什么JavaScript 合并子数组JavaScript 使用BigInt计算长阶乘