本文旨在解决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 函数中，需要实现详细的表单验证逻辑。这包括检查必填字段是否为空、验证手机号码格式、验证密码强度等。
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应用程序的健壮性和安全性。关键在于阻止默认的表单提交行为，实现详细的表单验证逻辑，并在验证成功后才允许表单提交。同时，需要注意服务器端验证，以确保数据的完整性和安全性。
