阻止JavaScript表单验证未通过时的数据插入-php教程-PHP中文网

阻止JavaScript表单验证未通过时的数据插入

聖光之護

发布： 2025-09-01 11:44:24

原创

176人浏览过

阻止javascript表单验证未通过时的数据插入

本文旨在解决JavaScript表单验证未通过时，数据被错误插入数据库的问题。通过修改JavaScript验证函数，在验证失败时阻止表单提交，并在验证成功后才允许提交，确保数据的有效性和完整性。文章提供详细的代码示例和步骤，帮助开发者构建更健壮的表单验证机制。

在Web开发中，表单验证是至关重要的一环，它确保用户输入的数据符合预期格式和规则，从而保证数据的有效性和完整性。然而，如果表单验证机制不完善，可能导致未经验证的数据被错误地插入数据库，造成数据污染。本文将介绍如何使用JavaScript来阻止表单验证未通过时的数据插入，从而构建更健壮的表单验证机制。

阻止默认表单提交行为

首先，需要阻止表单的默认提交行为。这可以通过在 onsubmit 事件处理函数中调用 event.preventDefault() 方法来实现。这样，即使表单验证失败，也不会跳转到其他页面或执行默认的提交操作。

function validateFormRec(e){
  e.preventDefault();

  // ... 验证逻辑 ...

  // 如果验证失败，阻止表单提交
  if (!bValid) {
    return false;
  }

  // 如果验证成功，允许表单提交
  return true;
}

登录后复制

在HTML中，需要将 onsubmit 事件处理函数绑定到 form 元素，并确保返回 validateFormRec(event) 的结果。

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

<form name="myForm" onsubmit="return validateFormRec(event)">
  </form>

登录后复制

详细的表单验证

在 validateFormRec 函数中，需要实现详细的表单验证逻辑。这包括检查必填字段是否为空、验证手机号码格式、验证密码强度等。

表单大师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;
      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;
  }

  form.method='POST';
  return bValid;
}

登录后复制

上面的代码示例展示了如何验证表单中的多个字段，包括检查是否为空、验证手机号码格式、验证密码长度等。如果任何一个验证失败，bValid 变量将被设置为 false，并显示相应的错误提示信息。

修改表单提交方式

只有当表单验证全部通过时，才应该允许表单提交。为了确保数据能够被正确地发送到服务器，可以在验证成功后修改表单的 method 属性为 POST。

  form.method='POST';
  return bValid;

登录后复制

HTML结构调整

为了更好地与JavaScript代码配合，可以对HTML结构进行一些调整，例如移除不必要的属性，并添加必要的 label 元素。

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

登录后复制