JavaScript 表单验证：防止未验证数据插入数据库-php教程-PHP中文网

JavaScript 表单验证：防止未验证数据插入数据库

心靈之曲

发布： 2025-09-01 14:00:04

原创

296人浏览过

javascript 表单验证：防止未验证数据插入数据库

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

前端表单验证的必要性

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

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

实现步骤

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

HTML 结构调整:

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

立即学习“Java免费学习笔记（深入）”；

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

    <label>
      <b>Mobile Number:</b>
      <input type="text" placeholder="ex: 966563929302" name="Number" />
    </label>

    <label>
      <b>Password:</b>
      <input type="password" placeholder="Enter Password" name="Password" />
    </label>

    <input type='submit' value='Sign up' />
  </div>
</form>

登录后复制

JavaScript 验证函数:

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

表单大师AI

一款基于自然语言处理技术的智能在线表单创建工具，可以帮助用户快速、高效地生成各类专业表单。

查看详情

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 =youjiankuohaophpcn { ... });: 使用 some 方法遍历表单元素。如果找到一个无效的元素，就设置 bValid 为 false，并停止遍历。
一系列 if 语句用于验证不同的输入字段。如果任何一个验证失败，就弹出警告框，并将 bValid 设置为 false。
form.method='POST'; form.submit();: 如果 bValid 仍然为 true，表示所有验证都通过了，此时设置表单的提交方式为 POST，并提交表单。
return bValid;: 返回 bValid 的值，虽然在这里没有直接使用，但保持一致性。

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!";
    }
}
?>

登录后复制

注意事项: