创建强大的网页表单验证器：使用JavaScript

2024-01-08 00:24:47

在当今的数字世界中，用户输入的数据质量至关重要。一个强大的表单验证器能够确保用户提供的信息准确无误，提高应用程序的效率和安全性。本博客将介绍如何使用JavaScript创建一个复杂的网页表单验证器，该验证器将检查用户输入的电子邮件地址、手机号、身份证号、银行卡号和密码是否有效。

一、表单设计

首先，我们需要一个HTML表单来收集用户输入的数据。在HTML文件中，创建一个包含以下字段的表单：

<form id="myForm">  
  <label for="name">姓名:</label><br>  
  <input type="text" id="name" name="name"><br>  
  <span id="nameError" class="error"></span><br>  
    
  <label for="email">电子邮件:</label><br>  
  <input type="text" id="email" name="email"><br>  
  <span id="emailError" class="error"></span><br>  
    
  <label for="phone">手机号:</label><br>  
  <input type="text" id="phone" name="phone"><br>  
  <span id="phoneError" class="error"></span><br>  
    
  <label for="idCard">身份证号:</label><br>  
  <input type="text" id="idCard" name="idCard"><br>  
  <span id="idCardError" class="error"></span><br>  
    
  <label for="bankCard">银行卡号:</label><br>  
  <input type="text" id="bankCard" name="bankCard"><br>  
  <span id="bankCardError" class="error"></span><br>  
    
  <label for="password">密码:</label><br>  
  <input type="password" id="password" name="password"><br>  
  <span id="passwordError" class="error"></span><br>  
    
  <input type="submit" value="提交">  
</form>

?在这个表单中，每个输入字段都有一个与之关联的错误消息显示区域。我们将使用JavaScript来检查用户输入的有效性，并在需要时显示错误消息。

二、JavaScript代码分析

?接下来，我们需要在JavaScript文件中编写验证逻辑。下面是一个示例代码，其中包含了用于检查各种输入字段有效性的函数：

document.getElementById("myForm").addEventListener("submit", function(event){  
  var nameInput = document.getElementById("name");  
  var emailInput = document.getElementById("email");  
  var phoneInput = document.getElementById("phone");  
  var idCardInput = document.getElementById("idCard");  
  var bankCardInput = document.getElementById("bankCard");  
  var passwordInput = document.getElementById("password");  
  var nameError = document.getElementById("nameError");  
  var emailError = document.getElementById("emailError");  
  var phoneError = document.getElementById("phoneError");  
  var idCardError = document.getElementById("idCardError");  
  var bankCardError = document.getElementById("bankCardError");  
  var passwordError = document.getElementById("passwordError");  
  var isValid = true;  
  var formElement = event.target;  
    
  // 姓名验证函数  
  function validateName() {  
    if (nameInput.value === "") {  
      nameError.textContent = "姓名不能为空";  
      isValid = false;  
    } else {  
      nameError.textContent = "";  
    }  
  }  
  // 电子邮件验证函数（使用正则表达式）  
  function validateEmail() {  
    var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;  
    if (!emailRegex.test(emailInput.value)) {  
      emailError.textContent = "无效的电子邮件地址";  
      isValid = false;  
    } else {  
      emailError.textContent = "";  
    }  
  }  
  // 手机号验证函数（使用正则表达式）  
  function validatePhone() {  
    var phoneRegex = /^\d{11}$/; // 简单的手机号格式验证，实际应用中可能需要更复杂的规则  
    if (!phoneRegex.test(phoneInput.value)) {  
      phoneError.textContent = "无效的手机号";  
      isValid = false;  
    } else {  
      phoneError.textContent = "";  
    }  
  }  
  // 身份证号验证函数（使用正则表达式）  
  function validateIdCard() { // 简单的身份证号格式验证，实际应用

验证用户输入的信息是否准确，可以采用多种方式，包括但不限于：

?一、使用正则表达式（Regex）：正则表达式是一种强大的文本处理工具，可以用来验证用户输入的信息是否符合特定的格式。例如，如果你想验证一个用户输入的电子邮件地址是否有效，你可以使用一个特定的正则表达式来匹配电子邮件地址的通用格式。以下是一些常见的正则表达式：

验证数字：^\d+$
验证字母：^[a-zA-Z]+$
验证密码（包含大小写字母和数字，长度在8-16位）：^[a-zA-Z0-9]{8,16}$
验证邮箱：^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,4}$
验证手机号（以1开头，11位数字）：^1[3456789]\d{9}$
验证IP地址（包括IPv4和IPv6）：
IPv4：^((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?).){3}(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)IPv6：(([0?9A?Fa?f]1,4:)7[0?9A?Fa?f]1,4∣([0?9A?Fa?f]1,4:)1,7:∣([0?9A?Fa?f]1,4:)1,6:[0?9A?Fa?f]1,4∣([0?9A?Fa?f]1,4:)1,5(:[0?9A?Fa?f]1,4)1,2∣([0?9A?Fa?f]1,4:)1,4(:[0?9A?Fa?f]1,4)1,3∣([0?9A?Fa?f]1,4:)1,3(:[0?9A?Fa?f]1,4)1,4∣([0?9A?Fa?f]1,4:)1,2(:[0?9A?Fa?f]1,4)1,5∣[0?9A?Fa?f]1,4:((:[0?9A?Fa?f]1,4)1,6)∣:((:[0?9A?Fa?f]1,4)1,7∣:)∣fe80:(:[0?9A?Fa?f]0,4)0,4
验证URL：^(https?://[^\s]+)$

?二、后端验证：在用户提交表单后，可以进一步验证用户输入的信息是否准确。例如，如果用户输入了一个身份证号，你可以在后端进行验证，检查这个身份证号是否真实存在。举例

当用户在前端提交表单后，你可以在后端进行以下操作来验证用户输入的信息：

数据接收：首先，你需要从前端接收用户输入的数据。这可以通过使用HTTP请求或类似的机制来完成。
数据验证：接下来，你可以使用正则表达式或其他验证方法来验证用户输入的数据是否符合预期的格式。例如，如果用户输入了身份证号，你可以使用正则表达式来检查它是否符合身份证号的通用格式。
数据库查询或API调用：一旦验证了数据的格式，你可以进一步检查数据的准确性。例如，对于身份证号，你可以将其发送到数据库中进行查询，或者调用一个外部的API来验证该身份证号是否真实存在。
处理结果：根据数据库查询或API调用的结果，你可以决定如何处理用户提交的数据。如果数据验证通过，你可以继续处理表单数据；如果数据验证失败，你可以返回一个错误消息给前端，告诉用户输入的信息不准确。

import re  
import requests  
  
# 定义身份证号的正则表达式  
id_card_regex = re.compile(r'^\d{17}(\d|X)$')  
  
# 定义验证身份证号的函数  
def validate_id_card(id_card):  
    if not id_card_regex.match(id_card):  
        return False  # 身份证号格式不正确  
      
    # 调用外部API进行身份证号验证（此处为示例，实际应用中需要替换为真实的API）  
    response = requests.get(f'https://api.example.com/validate-id-card?id_card={id_card}')  
    if response.status_code == 200 and response.json()['is_valid']:  
        return True  # 身份证号验证通过  
    else:  
        return False  # 身份证号验证失败  
  
# 接收前端提交的身份证号数据（此处仅为示例，实际应用中需要替换为接收数据的逻辑）  
id_card = '身份证号码'  # 用户输入的身份证号数据  
  
# 进行后端验证  
if validate_id_card(id_card):  
    # 身份证号验证通过，继续处理表单数据  
    print('身份证号验证通过')  
    # 处理表单数据的逻辑（此处省略）  
else:  
    # 身份证号验证失败，返回错误消息给前端  
    print('身份证号验证失败')

三、前端验证：在用户提交表单之前，可以在前端进行初步的验证。例如，如果一个字段应该只包含数字，你可以在前端使用JavaScript来检查用户输入的内容是否只包含数字。

前端验证是一种有效的用户体验优化手段，它允许在数据提交到后端之前快速过滤和验证用户输入。通过前端验证，可以即时向用户反馈信息，避免不必要的后端请求和处理，从而提高应用的响应速度和用户体验。

以下是一个简单的例子，说明如何在前端使用JavaScript验证一个字段是否只包含数字：

<!DOCTYPE html>  
<html>  
<head>  
  <title>前端验证示例</title>  
  <script>  
    function validateForm() {  
      var inputField = document.getElementById("inputField");  
      var inputValue = inputField.value;  
      var isNumeric = /^[0-9]+$/.test(inputValue);  
        
      if (!isNumeric) {  
        alert("请输入数字！");  
        return false; // 阻止表单提交  
      }  
        
      return true; // 允许表单提交  
    }  
  </script>  
</head>  
<body>  
  <form onsubmit="return validateForm()">  
    <input type="text" id="inputField">  
    <input type="submit" value="提交">  
  </form>  
</body>  
</html>

在这个例子中，当用户尝试提交表单时，validateForm()函数会被调用。该函数通过正则表达式检查输入字段的值是否只包含数字。如果输入不是数字，就会弹出一个警告，并阻止表单提交。如果输入是数字，表单就会正常提交。

需要注意的是，前端验证虽然可以提高用户体验，但不能替代后端验证。因为用户可以轻松绕过前端验证，所以后端验证仍然是必要的，以确保数据的完整性和安全性。

四、使用第三方库或API：有些库或API提供了验证用户输入的功能。例如，有些库可以验证用户输入的日期是否有效。

使用第三方库或API进行用户输入验证是一种非常高效的方法，因为这些库和API通常已经经过了广泛的使用和测试，能够提供稳定且可靠的验证功能。以下是一些常见的第三方库和API，可用于验证用户输入的不同类型数据：

日期验证：
- date-fns：一个现代的JavaScript日期库，提供了各种日期操作和验证功能。
- moment.js：一个流行的日期处理库，可以进行日期格式化、解析和验证。
邮箱格式验证：
- is-email：一个简单的邮箱地址验证库。
- email-validator：提供了多种邮箱验证方法。
手机号验证：
- phone-number：用于验证世界各地的手机号格式。
- validate-phone-number：一个轻量级的手机号验证库。
身份证号验证：
- id-card-validator：用于验证中国大陆的身份证号。
- id-card-number-validation：另一个用于验证中国大陆身份证号的库。
IP地址验证：
- ip-regex：一个用于匹配IP地址的正则表达式库。
URL验证：
- is-url：一个简单的URL验证库。
信用卡号验证：
- credit-card-type：一个用于识别和验证各种信用卡号的库。
密码强度验证：
- password-strength：一个用于评估密码强度的库，考虑了各种因素如长度、字符组合等。
JSON格式验证：
- json-schema：用于定义和验证JSON结构的库。
正则表达式库：如?regex-builder,?re,?xregexp, 等等，这些库提供了创建和测试正则表达式的功能。

使用这些第三方库或API时，通常需要先安装它们（例如，通过npm或yarn），然后在代码中引入并使用相应的函数或方法进行验证。同时，务必注意检查库或API的文档，以确保正确使用其功能，并根据需要进行配置或定制。

五、用户反馈：如果可能的话，可以让用户对他们的输入进行自我验证。例如，许多在线表单都有“再次输入密码”的字段，这样用户就可以在提交表单之前检查两次输入的密码是否一致。

用户反馈中提到的“再次输入密码”字段是一个很好的自我验证的例子。这种做法确实可以帮助用户在提交表单之前检查两次输入的密码是否一致，从而提高数据的准确性。

除了密码验证之外，还可以考虑其他类型的自我验证机制。例如：

必填字段检查：确保用户填写了所有必填字段，并在提交表单之前给出明确的提示。
格式验证：使用正则表达式或类似的机制来验证用户输入的数据格式是否正确。例如，电话号码、邮箱地址等字段可以要求用户按照特定的格式输入。
范围验证：某些字段可能需要特定的值范围。例如，年龄字段可以要求用户输入一个合理的年龄范围。
相似度检查：在某些情况下，可以比较两个或多个字段的内容，以确保它们之间的相似度在可接受的范围内。例如，用户名和电子邮件地址不能太相似，以避免潜在的冲突或误操作。
自定义验证：根据特定的业务逻辑或规则，可以在前端进行自定义验证。例如，某些表单字段可能需要根据其他字段的值来验证。

通过实施这些自我验证机制，可以显著提高用户输入的准确性和一致性，同时减少后端验证的工作量。然而，需要注意的是，前端验证只能提供初步的过滤和提示，后端验证仍然是必不可少的，以确保数据的安全性和完整性。

六、使用表单验证器插件：有很多插件可以用于验证HTML表单，例如jQuery Validation Plugin和Bootstrap Validator。这些插件提供了各种内置的验证规则，并允许你自定义规则。举例?

使用表单验证器插件是一种非常方便的方式来验证用户输入。这些插件通常提供了丰富的内置验证规则，并且允许你根据需要进行自定义。以下是一些常见的表单验证器插件及其示例：?

jQuery Validation Plugin：

这是一个流行的jQuery插件，用于验证HTML表单。它提供了很多内置规则，例如邮箱、密码、URL等，并且很容易进行自定义。

示例：

javascript`$("#myForm").validate({  
  rules: {  
    email: {  
      required: true,  
      email: true  
    },  
    password: {  
      required: true,  
      minlength: 6  
    }  
  },  
  messages: {  
    email: {  
      required: "请输入邮箱地址",  
      email: "请输入有效的邮箱地址"  
    },  
    password: {  
      required: "请输入密码",  
      minlength: "密码长度不能少于6个字符"  
    }  
  }  
});`  
```在上面的示例中，`#myForm`是表单的选择器。我们为`email`字段定义了`required`和`email`规则，确保用户输入了一个必填的邮箱地址，并且格式正确。对于`password`字段，我们定义了`required`和`minlength`规则，要求用户输入必填的密码，并且长度至少为6个字符。在`messages`部分，我们提供了自定义的错误消息，以便在验证失败时向用户显示。

Bootstrap Validator：

这是另一个流行的表单验证插件，与Bootstrap框架集成良好。它提供了与Bootstrap样式一致的验证反馈。

示例：

javascript`$('#myForm').bootstrapValidator({  
  fields: {  
    email: {  
      validators: {  
        notEmpty: { message: '请输入邮箱地址' },  
        emailAddress: { message: '请输入有效的邮箱地址' }  
      }  
    },  
    password: {  
      validators: {  
        notEmpty: { message: '请输入密码' },  
        stringLength: { min: 6, message: '密码长度不能少于6个字符' }  
      }  
    }  
  }  
});`  
```在上面的示例中，我们使用Bootstrap Validator对表单进行验证。对于`email`字段，我们使用`notEmpty`和`emailAddress`验证器来确保用户输入了一个必填的邮箱地址，并且格式正确。对于`password`字段，我们使用`notEmpty`和`stringLength`验证器来要求用户输入必填的密码，并且长度至少为6个字符。与jQuery Validation Plugin类似，我们也可以自定义错误消息。

七、数据校验和清理：在存储用户数据之前，应该对数据进行校验和清理。例如，你可以使用SQL语句来检查用户输入的数据是否符合数据库的约束条件。举例

?数据校验和清理是非常重要的步骤，以确保存储在数据库中的数据质量。在存储用户数据之前，进行数据校验和清理可以防止无效或恶意数据进入系统，并确保数据的准确性和完整性。

以下是一个使用SQL语句进行数据校验和清理的示例：

假设我们有一个用户表（user_table），其中包含用户的姓名（name）和年龄（age）字段。在存储用户数据之前，我们可以使用SQL语句来检查用户输入的数据是否符合表中的约束条件。

-- 检查年龄是否符合约束条件（例如，年龄必须在18岁到100岁之间）  
SELECT *  
FROM user_table  
WHERE age < 18 OR age > 100;

?上述查询将返回年龄不符合约束条件的所有用户记录。通过这种方式，我们可以发现并处理无效或恶意数据。

除了使用查询语句进行数据校验和清理，还可以使用触发器（trigger）在插入或更新数据时自动进行校验。例如，我们可以创建一个触发器，在插入新用户数据之前检查年龄是否符合约束条件。如果数据不符合条件，触发器可以阻止插入操作，并返回相应的错误信息。

通过数据校验和清理，我们可以确保存储在数据库中的数据质量，并减少潜在的数据完整性问题。

文章来源:https://blog.csdn.net/geng1025/article/details/135423349
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：veading@qq.com进行投诉反馈，一经查实，立即删除！