JavaScript表单验证技巧防数据错误入库

还在为用户提交的错误数据烦恼吗？本文为你提供一套全面的 **JavaScript 表单验证技巧**，旨在帮助开发者有效**防止数据误入库**，提升数据质量。我们将深入探讨如何利用 JavaScript 拦截表单提交事件，在客户端执行精准验证，确保只有符合规范的数据才能提交。通过移除 HTML 默认提交行为，并自定义 JavaScript 验证函数，实现对姓名、电话号码、密码等关键字段的有效性检查，例如电话号码格式、前缀以及密码长度等。配合后端 PHP 的二次验证，更能从根本上增强Web应用的安全性，提高用户体验，减少服务器压力。立即学习，让你的表单数据更安全、更可靠！

本文档旨在提供一个详细的教程，指导开发者如何使用 JavaScript 实现表单验证，并防止未经验证的错误数据被插入到数据库中。我们将深入探讨如何拦截表单提交事件，执行客户端验证，并在所有输入都有效后才允许表单提交，从而确保数据的完整性和准确性。

前端表单验证的必要性

在Web开发中，前端表单验证是至关重要的一环。它可以在数据提交到服务器之前，在客户端对用户输入的数据进行检查，从而：

• 减少服务器压力： 避免将无效数据发送到服务器，节省服务器资源。
• 提高用户体验： 及时反馈错误信息，帮助用户更正输入，避免页面跳转和不必要的等待。
• 增强安全性： 过滤恶意输入，防止SQL注入等安全问题。

实现步骤

我们将通过一个注册表单的例子，演示如何使用 JavaScript 实现表单验证，并阻止未通过验证的数据插入数据库。

1. HTML 结构调整:

首先，我们需要修改 HTML 结构，移除 form 标签中的 action 属性和 onsubmit 中的 return false;。我们将使用 JavaScript 来控制表单的提交。

<form name="myForm" onsubmit="return validateFormRec(event)">
  <div class="container">
    <label>
      <b>Name:</b>
      &lt;input type=&quot;text&quot; placeholder=&quot;Enter Name&quot; name=&quot;Name&quot; /&gt;
    </label>

    <label>
      <b>Mobile Number:</b>
      &lt;input type=&quot;text&quot; placeholder=&quot;ex: 966563929302&quot; name=&quot;Number&quot; /&gt;
    </label>

    <label>
      <b>Password:</b>
      &lt;input type=&quot;password&quot; placeholder=&quot;Enter Password&quot; name=&quot;Password&quot; /&gt;
    </label>

    &lt;input type=&apos;submit&apos; value=&apos;Sign up&apos; /&gt;
  </div>
</form>

2. JavaScript 验证函数:

接下来，我们编写 JavaScript 验证函数 validateFormRec(event)。这个函数将拦截表单的提交事件，执行验证逻辑，并根据验证结果决定是否允许表单提交。

function validateFormRec(e){
  e.preventDefault(); // 阻止表单的默认提交行为

  const form=document.forms.myForm; // 获取表单对象
  const col=[...form.elements]; // 将表单元素转换为数组
  const pttn=/^\d{12}$/; // 电话号码的正则表达式

  let bValid=true; // 设置一个标志位，用于记录验证结果

  // 遍历所有表单元素，检查是否为空
  col.some(n=>{
    if( n.nodeType==1 && n.value=='' && n.type!='submit' ){
      alert( '"' + n.name + '" cannot be empty!');
      bValid=false; // 如果有空字段，设置标志位为 false
      return true; // 停止遍历
    }
  });

  // 电话号码格式验证
  if( !pttn.test(form.Number.value) ){
    alert("The number must contain 12 digits");
    bValid=false;
  }

  // 电话号码前缀验证
  if( !form.Number.value.startsWith("966") ){
    alert("The Number must start with 966");
    bValid=false;
  }

  // 密码长度验证
  if( form.Password.value.length < 5 ){
    alert('That Password is too short!');
    bValid=false;
  }

  // 只有当所有验证都通过时，才允许表单提交
  if(bValid){
      form.method='POST'; // 设置表单提交方式为 POST
      form.submit(); // 提交表单
  }

  return bValid; // 返回验证结果
}

代码解释:

• e.preventDefault();: 阻止表单的默认提交行为，防止页面跳转。
• document.forms.myForm: 获取表单对象。
• [...form.elements]: 将表单元素转换为数组，方便遍历。
• let bValid = true;: 设置一个布尔变量，初始值为 true，表示表单初始状态是有效的。
• col.some(n => { ... });: 使用 some 方法遍历表单元素。如果找到一个无效的元素，就设置 bValid 为 false，并停止遍历。
• 一系列 if 语句用于验证不同的输入字段。如果任何一个验证失败，就弹出警告框，并将 bValid 设置为 false。
• form.method='POST'; form.submit();: 如果 bValid 仍然为 true，表示所有验证都通过了，此时设置表单的提交方式为 POST，并提交表单。
• return bValid;: 返回 bValid 的值，虽然在这里没有直接使用，但保持一致性。

3. PHP 后端处理 (简要说明):

在 PHP 后端，你仍然需要进行服务器端验证，以确保数据的安全性。以下是一个简单的示例：

<?php
if($_SERVER['REQUEST_METHOD'] == "POST") {
    $RecipientName = $_POST['Name'];
    $Number = $_POST['Number'];
    $password = $_POST['Password'];

    if(!empty($RecipientName) && !empty($Number) && !empty($password) && is_numeric($RecipientName) === false) {
        // 数据验证通过，执行数据库插入操作
        $Recipient_id = random_int(0, 500);
        $query = "insert into recipient (id,name,password,mobile) values ('$Recipient_id','$RecipientName','$password','$Number')";
        mysqli_query($con, $query);
        header("location:RecpPH.php");
        die();
    } else {
        echo "Please enter some valid information!";
    }
}
?>

注意事项:

• 服务器端验证： 始终进行服务器端验证，因为客户端验证可以被绕过。
• 正则表达式： 使用正则表达式进行更复杂的验证，例如邮箱格式、密码强度等。
• 错误提示： 提供清晰友好的错误提示信息，帮助用户更正输入。
• 安全性： 使用 mysqli_real_escape_string 或预处理语句，防止 SQL 注入攻击。
• 用户体验： 可以使用 CSS 美化错误提示信息，提供更好的用户体验。

总结

通过以上步骤，我们成功地实现了 JavaScript 表单验证，并阻止了未通过验证的数据插入数据库。这种方法可以有效地提高用户体验，减少服务器压力，并增强应用程序的安全性。记住，客户端验证和服务器端验证是相辅相成的，都需要认真对待。

今天关于《JavaScript表单验证技巧防数据错误入库》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！