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

wufei123 发布于 2025-09-02 阅读（6）

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

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

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

阻止默认表单提交行为

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

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

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

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

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

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

<form name="myForm" onsubmit="return validateFormRec(event)">
  </form>
详细的表单验证

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

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>
注意事项
  • 确保在所有需要验证的表单字段上都添加了相应的验证逻辑。
  • 根据实际需求，可以添加更多的验证规则，例如邮箱格式验证、用户名唯一性验证等。
  • 为了提高用户体验，可以使用更友好的错误提示方式，例如在表单字段下方显示错误信息，而不是使用 alert 弹窗。
  • 建议在服务器端也进行表单验证，以防止恶意用户绕过客户端验证。
总结

通过上述步骤，可以有效地阻止JavaScript表单验证未通过时的数据插入，从而提高Web应用程序的健壮性和安全性。关键在于阻止默认的表单提交行为，实现详细的表单验证逻辑，并在验证成功后才允许表单提交。同时，需要注意服务器端验证，以确保数据的完整性和安全性。

以上就是阻止JavaScript表单验证未通过时的数据插入的详细内容，更多请关注知识资源分享宝库其它相关文章！

标签:  表单 过时 插入 

相关阅读

发表评论:

◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。

最近发表

标签列表