JavaScript表单验证：确保数据有效性与防止非法提交的教程

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

  const form = document.forms.myForm;
  // 获取表单所有元素，并过滤掉非输入元素或提交按钮
  const inputs = [...form.elements].filter(n => n.nodeType === 1 && n.type !== 'submit');
  // 手机号码的正则表达式：12位数字
  const phonePattern = /^\d{12}$/;

  let isValid = true; // 验证状态标志，默认为true

  // 1. 检查所有必填字段是否为空
  for (const input of inputs) {
    if (input.value.trim() === '') {
      alert(`"${input.name}" 字段不能为空!`);
      isValid = false;
      // 一旦发现空字段，停止检查其他字段，并立即返回
      return false; // 在此直接返回false，阻止后续验证和提交
    }
  }

  // 2. 手机号码格式验证
  const mobileNumber = form.Number.value.trim();
  if (!mobileNumber.startsWith("966")) {
    alert("手机号码必须以“966”开头");
    isValid = false;
  } else if (!phonePattern.test(mobileNumber)) {
    alert("手机号码必须包含12位数字");
    isValid = false;
  }

  // 3. 密码长度验证
  const password = form.Password.value;
  if (password.length < 5) {
    alert('密码长度太短，至少需要5个字符！');
    isValid = false;
  }

  // 如果所有验证都通过，则手动提交表单
  if (isValid) {
    // 确保表单方法为POST，然后提交
    form.method = 'POST';
    form.submit(); // 手动触发表单提交
  }
  // 如果验证失败，则不执行任何操作，因为已经preventDefault了
  return isValid; // 虽然这里手动提交了，但为了清晰起见，仍返回验证结果
}

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

<?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)) {
        // 生成唯一ID（建议使用更安全的UUID或数据库自增ID）
        $Recipient_id = random_int(0, 500); 

        // 注意：这里缺少对输入数据的SQL注入防护，例如使用预处理语句
        // $query = "insert into recipient (id,name,password,mobile) values (?,?,?,?)";
        // $stmt = mysqli_prepare($con, $query);
        // mysqli_stmt_bind_param($stmt, "isss", $Recipient_id, $RecipientName, $password, $Number);
        // mysqli_stmt_execute($stmt);

        $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 "请填写有效信息！"; // 如果服务器端验证失败，给出提示
    }
}
?>