在客户端的形式验证

客户端表单验证至关重要——它节省时间和带宽，并提供更多选项来指出用户填写表单时出错的地方。话虽如此，但这并不意味着您不需要服务器端验证。访问您网站的用户可能使用旧浏览器或禁用了 JavaScript，这将破坏仅客户端验证。客户端和服务器端验证相互补充，因此，它们确实不应独立使用。

为什么客户端验证很重要？

使用客户端验证有两个很好的理由：

1. 它是快速的验证方式：如果出现问题，则在提交表单时会触发警报。

2. 您可以安全地一次只显示一个错误并关注错误的字段，以帮助确保用户正确填写您需要的所有详细信息。

两种主要的验证方法

客户端表单验证的两种主要方法是：

• 一次显示一个错误，关注有问题的字段
• 同时显示所有错误，服务器端验证样式

虽然同时显示所有错误是服务器端验证所必需的，但客户端验证的更好方法是一次显示一个错误。这使得仅突出显示已填写不正确的字段成为可能，这反过来又使访问者更容易修改并成功提交表单。如果您同时向用户呈现所有错误，大多数人都会尝试一次记住并纠正它们，而不是在每次更正后尝试重新提交。

鉴于这些优势，我将只关注一次显示一个错误的验证方法。

如何验证表单

例如，以下代码片段：

<code><br>
function validateMyForm() { <br>
if (parseInt(document.forms[0].phone.value)  <br>
        != document.forms[0].phone.value) { <br>
alert('请输入电话号码，仅限数字'); <br>
return false; <br>
} <br>
 <br>
return true; <br>
} <br>
<br><br></code>

电话：

有什么问题？好吧，如果您在此之前添加另一个表单，代码将尝试验证错误的表单。

更好的方法是包含表单名称：

<code>function validateMyForm() { <br>
if (parseInt(document.forms.myForm.phone.value)  <br>
        != document.forms.myForm.phone.value) { <br><br></code>

onsubmit="return validateMyForm();"> 这肯定更好，但仍然不够可移植——如果您想在另一个表单上重用此验证的一部分，则必须首先进行大量文本替换。

因此，让我们删除表单名称：

<code>function validateMyForm(form) { <br>
if (parseInt(form.phone.value) != form.phone.value) { <br><br></code>

此最后一种方法使用了对象 this，它始终指向当前对象。这使我们的代码更具可移植性，并节省了打字时间。

现在如何让访问者的生活更轻松呢？让我们关注触发错误的字段，而不是让他们自己去查找。

<code>function validateMyForm(form) { <br>
if (parseInt(form.phone.value) != form.phone.value) { <br>
alert('请输入电话号码，仅限数字'); <br>
form.phone.focus(); <br>
form.phone.select(); <br>
return false; <br>
}</code>

通过这些更改，浏览器将关注填写不正确的字段，甚至会为访问者选择文本。如果需要滚动，这也将自动发生。

好的，这很好，但是您是否觉得每个字段的代码有点太多了？如果我们创建一个简单的函数库，可以节省页面的大量打字和下载时间呢？好吧，接下来我们将执行此操作——我们将定义我们的基本函数，以使验证代码更短。

<code><br>
function validateMyForm() { <br>
if (parseInt(document.forms[0].phone.value)  <br>
        != document.forms[0].phone.value) { <br>
alert('请输入电话号码，仅限数字'); <br>
return false; <br>
} <br>
 <br>
return true; <br>
} <br>
<br><br></code>

此函数执行数字的简单验证——它检查字段是否仅包含数字，以及可选地，它是否在给定范围内。您会注意到此代码将错误消息作为参数传递。要使用这样的函数，我们基本上可以将其添加到onsubmit处理程序中，如下所示：

<code>function validateMyForm() { <br>
if (parseInt(document.forms.myForm.phone.value)  <br>
        != document.forms.myForm.phone.value) { <br><br></code>

onsubmit="return validateNumber(this.phone,
'请输入电话号码，仅限数字', 5, 10);"> 像这样调用它，它将检查电话号码是否为数字，并且长度大于 5 位，小于 10 位。注意如何将 phone 对象作为参数传递？这允许我们通过辅助函数关注它，而不是仅传递字段的值。

验证数字的另一种方法是要求它们在给定范围内。要使函数执行此类验证，只需将检查行更改为：

<code>function validateMyForm(form) { <br>
if (parseInt(form.phone.value) != form.phone.value) { <br><br></code>

如果您想对表单应用多个检查，您可以在onsubmit处理程序中嵌入多个规则。例如，想象一下，除了电话号码之外，我们还需要输入名字和姓氏：

<code>function validateMyForm(form) { <br>
if (parseInt(form.phone.value) != form.phone.value) { <br>
alert('请输入电话号码，仅限数字'); <br>
form.phone.focus(); <br>
form.phone.select(); <br>
return false; <br>
}</code>

onsubmit="return (
validateNumber(this.phone, '请输入电话
号码，仅限数字', 5, 10) &&
validateString(this.firstName, '请输入
您的名字', 3, 15) &&
validateString(this.lastName, '请输入
您的姓氏', 3, 15)
);"> 代码要求所有验证规则都评估为真（使用逻辑 AND - &&）。仔细观察就会发现，从服务器脚本语言生成这种代码非常容易……但这又是另一篇文章了。

<code>function validateNumber(field, msg, min, max) {  <br>
if (!min) { min = 0 }  <br>
if (!max) { max = 255 }  <br>
  <br>
if ( (parseInt(field.value) != field.value) ||   <br>
        field.value.length  max) {  <br>
alert(msg);  <br>
field.focus();  <br>
field.select();  <br>
return false;  <br>
}  <br>
  <br>
return true;  <br>
}</code>

如您所见，字符串验证函数看起来或多或少相同；您还可以编写其他函数并将它们与这些函数结合使用。

Web 上许多表单中都需要一个常见的字段，即用户的电子邮件地址。我已经看到很多函数可以做到这一点，但是通常验证电子邮件地址最简单、最简单的方法是使用正则表达式。

现在我们将扩展我们的函数，使其可以将字段定义为可选。

<code></code>

要验证必需的电子邮件，您应该将其调用为：

<code>if ((parseInt(field.value) != field.value) ||   <br>
field.value  max) {</code>

如果您想将其设置为可选：

<code></code>

JavaScript 不能单独用于验证，但如果您拥有它，它会有很大帮助。您嵌入到 HTML 中的代码越紧凑越好——它可以节省下载时间，搜索引擎也会喜欢您！

关于表单验证的常见问题 (FAQ)

客户端验证和服务器端验证有什么区别？

客户端验证是在表单数据发送到服务器之前使用 JavaScript 在用户的浏览器中执行的。它提供即时反馈并改善用户体验。但是，可以通过禁用 JavaScript 或操作代码来绕过它，因此它并不完全安全。

另一方面，服务器端验证是在提交表单数据后在服务器上执行的。它更安全，因为用户无法绕过它。但是，它需要往返服务器，这可能会影响性能和用户体验。因此，建议同时使用客户端验证和服务器端验证，以获得最佳的安全性和用户体验。

如何在 PHP 中实现表单验证？

PHP 提供了多种表单验证函数。例如，您可以将 filter_var() 函数与不同的过滤器一起使用来验证和清理输入数据。这是一个验证电子邮件地址的简单示例：

$email = $_POST["email"]; if (!filter_var($email, FILTER_VALIDATE_EMAIL)) { echo "无效的电子邮件格式"; } 此代码检查提交的电子邮件地址是否格式正确。如果不是，则显示错误消息。

一些常见的验证技术是什么？

一些常见的验证技术包括必填字段、长度限制、模式匹配和数据类型检查。必填字段确保用户填写所有必要信息。长度限制限制可以输入的字符数。模式匹配检查输入是否与特定模式匹配，例如电子邮件地址或电话号码。数据类型检查确保输入是正确的类型，例如数字或日期。

如何显示验证错误消息？

您可以使用 JavaScript 进行客户端验证或使用 PHP 进行服务器端验证来显示验证错误消息。在 JavaScript 中，您可以使用 setCustomValidity() 方法来设置自定义验证消息。在 PHP 中，您可以将错误消息存储在变量中并在表单中显示它们。

如何验证复选框？

您可以通过检查复选框是否被选中来验证复选框。在 JavaScript 中，您可以使用 checked 属性。在 PHP 中，您可以检查复选框值是否出现在 $_POST 或 $_GET 中。

如何验证下拉列表？

您可以通过检查是否选择了有效选项来验证下拉列表。在 JavaScript 中，您可以使用 selectedIndex 属性。在 PHP 中，您可以检查所选值是否在有效值的数组中。

如何验证单选按钮？

您可以通过检查是否选择了其中一个选项来验证单选按钮。在 JavaScript 中，您可以循环遍历单选按钮并使用 checked 属性。在 PHP 中，您可以检查单选按钮值是否出现在 $_POST 或 $_GET 中。

如何验证日期？

您可以通过检查日期格式是否正确以及它是否为真实日期来验证日期。在 JavaScript 中，您可以使用 Date 对象。在 PHP 中，您可以使用 checkdate() 函数。

如何验证文件上传？

您可以通过检查文件大小、文件类型和文件扩展名来验证文件上传。在 JavaScript 中，您可以使用 files 属性。在 PHP 中，您可以使用 $_FILES 数组。

如何防止 SQL 注入？

您可以使用预处理语句或参数化查询来防止 SQL 注入，这些语句将 SQL 代码与数据分开。这可以防止数据被解释为代码。在 PHP 中，您可以使用 PDO 或 MySQLi 扩展来执行预处理语句。

以上是在客户端的形式验证的详细内容。更多信息请关注PHP中文网其他相关文章！