本文档旨在提供一个详细的教程，指导开发者如何使用 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)。这个函数将拦截表单的提交事件，执行验证逻辑，并根据验证结果决定是否允许表单提交。
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!";
}
}
?>注意事项:
- 服务器端验证： 始终进行服务器端验证，因为客户端验证可以被绕过。
- 正则表达式： 使用正则表达式进行更复杂的验证，例如邮箱格式、密码强度等。
- 错误提示： 提供清晰友好的错误提示信息，帮助用户更正输入。
- 安全性： 使用 mysqli_real_escape_string 或预处理语句，防止 SQL 注入攻击。
- 用户体验： 可以使用 CSS 美化错误提示信息，提供更好的用户体验。
总结
通过以上步骤，我们成功地实现了 JavaScript 表单验证，并阻止了未通过验证的数据插入数据库。这种方法可以有效地提高用户体验，减少服务器压力，并增强应用程序的安全性。记住，客户端验证和服务器端验证是相辅相成的，都需要认真对待。
