客戶端表單驗(yàn)證至關(guān)重要——它節(jié)省時(shí)間和帶寬，并提供更多選項(xiàng)來指出用戶填寫表單時(shí)出錯(cuò)的地方。話雖如此，但這并不意味著您不需要服務(wù)器端驗(yàn)證。訪問您網(wǎng)站的用戶可能使用舊瀏覽器或禁用了 JavaScript，這將破壞僅客戶端驗(yàn)證。客戶端和服務(wù)器端驗(yàn)證相互補(bǔ)充，因此，它們確實(shí)不應(yīng)獨(dú)立使用。

為什么客戶端驗(yàn)證很重要？

使用客戶端驗(yàn)證有兩個(gè)很好的理由：

1. 它是快速的驗(yàn)證方式：如果出現(xiàn)問題，則在提交表單時(shí)會(huì)觸發(fā)警報(bào)。

2. 您可以安全地一次只顯示一個(gè)錯(cuò)誤并關(guān)注錯(cuò)誤的字段，以幫助確保用戶正確填寫您需要的所有詳細(xì)信息。

兩種主要的驗(yàn)證方法

客戶端表單驗(yàn)證的兩種主要方法是：

• 一次顯示一個(gè)錯(cuò)誤，關(guān)注有問題的字段
• 同時(shí)顯示所有錯(cuò)誤，服務(wù)器端驗(yàn)證樣式

雖然同時(shí)顯示所有錯(cuò)誤是服務(wù)器端驗(yàn)證所必需的，但客戶端驗(yàn)證的更好方法是一次顯示一個(gè)錯(cuò)誤。這使得僅突出顯示已填寫不正確的字段成為可能，這反過來又使訪問者更容易修改并成功提交表單。如果您同時(shí)向用戶呈現(xiàn)所有錯(cuò)誤，大多數(shù)人都會(huì)嘗試一次記住并糾正它們，而不是在每次更正后嘗試重新提交。

鑒于這些優(yōu)勢，我將只關(guān)注一次顯示一個(gè)錯(cuò)誤的驗(yàn)證方法。

如何驗(yàn)證表單

例如，以下代碼片段：

<code><br>
function validateMyForm() { <br>
if (parseInt(document.forms[0].phone.value) ?<br>
 ? ? ? ?!= document.forms[0].phone.value) { <br>
alert('請(qǐng)輸入電話號(hào)碼，僅限數(shù)字'); <br>
return false; <br>
} <br>
 <br>
return true; <br>
} <br>
<br><br></code>

電話：

有什么問題？好吧，如果您在此之前添加另一個(gè)表單，代碼將嘗試驗(yàn)證錯(cuò)誤的表單。

更好的方法是包含表單名稱：

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

onsubmit="return validateMyForm();"> 這肯定更好，但仍然不夠可移植——如果您想在另一個(gè)表單上重用此驗(yàn)證的一部分，則必須首先進(jìn)行大量文本替換。

因此，讓我們刪除表單名稱：

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

此最后一種方法使用了對(duì)象 this，它始終指向當(dāng)前對(duì)象。這使我們的代碼更具可移植性，并節(jié)省了打字時(shí)間。

現(xiàn)在如何讓訪問者的生活更輕松呢？讓我們關(guān)注觸發(fā)錯(cuò)誤的字段，而不是讓他們自己去查找。

<code>function validateMyForm(form) { <br>
if (parseInt(form.phone.value) != form.phone.value) { <br>
alert('請(qǐng)輸入電話號(hào)碼，僅限數(shù)字'); <br>
form.phone.focus(); <br>
form.phone.select(); <br>
return false; <br>
}</code>

通過這些更改，瀏覽器將關(guān)注填寫不正確的字段，甚至?xí)樵L問者選擇文本。如果需要滾動(dòng)，這也將自動(dòng)發(fā)生。

好的，這很好，但是您是否覺得每個(gè)字段的代碼有點(diǎn)太多了？如果我們創(chuàng)建一個(gè)簡單的函數(shù)庫，可以節(jié)省頁面的大量打字和下載時(shí)間呢？好吧，接下來我們將執(zhí)行此操作——我們將定義我們的基本函數(shù)，以使驗(yàn)證代碼更短。

<code><br>
function validateMyForm() { <br>
if (parseInt(document.forms[0].phone.value) ?<br>
 ? ? ? ?!= document.forms[0].phone.value) { <br>
alert('請(qǐng)輸入電話號(hào)碼，僅限數(shù)字'); <br>
return false; <br>
} <br>
 <br>
return true; <br>
} <br>
<br><br></code>

此函數(shù)執(zhí)行數(shù)字的簡單驗(yàn)證——它檢查字段是否僅包含數(shù)字，以及可選地，它是否在給定范圍內(nèi)。您會(huì)注意到此代碼將錯(cuò)誤消息作為參數(shù)傳遞。要使用這樣的函數(shù)，我們基本上可以將其添加到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,
'請(qǐng)輸入電話號(hào)碼，僅限數(shù)字', 5, 10);"> 像這樣調(diào)用它，它將檢查電話號(hào)碼是否為數(shù)字，并且長度大于 5 位，小于 10 位。注意如何將 phone 對(duì)象作為參數(shù)傳遞？這允許我們通過輔助函數(shù)關(guān)注它，而不是僅傳遞字段的值。

驗(yàn)證數(shù)字的另一種方法是要求它們?cè)诮o定范圍內(nèi)。要使函數(shù)執(zhí)行此類驗(yàn)證，只需將檢查行更改為：

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

如果您想對(duì)表單應(yīng)用多個(gè)檢查，您可以在onsubmit處理程序中嵌入多個(gè)規(guī)則。例如，想象一下，除了電話號(hào)碼之外，我們還需要輸入名字和姓氏：

<code>function validateMyForm(form) { <br>
if (parseInt(form.phone.value) != form.phone.value) { <br>
alert('請(qǐng)輸入電話號(hào)碼，僅限數(shù)字'); <br>
form.phone.focus(); <br>
form.phone.select(); <br>
return false; <br>
}</code>

onsubmit="return (
validateNumber(this.phone, '請(qǐng)輸入電話
號(hào)碼，僅限數(shù)字', 5, 10) &&
validateString(this.firstName, '請(qǐng)輸入
您的名字', 3, 15) &&
validateString(this.lastName, '請(qǐng)輸入
您的姓氏', 3, 15)
);"> 代碼要求所有驗(yàn)證規(guī)則都評(píng)估為真（使用邏輯 AND - &&）。仔細(xì)觀察就會(huì)發(fā)現(xiàn)，從服務(wù)器腳本語言生成這種代碼非常容易……但這又是另一篇文章了。

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

如您所見，字符串驗(yàn)證函數(shù)看起來或多或少相同；您還可以編寫其他函數(shù)并將它們與這些函數(shù)結(jié)合使用。

Web 上許多表單中都需要一個(gè)常見的字段，即用戶的電子郵件地址。我已經(jīng)看到很多函數(shù)可以做到這一點(diǎn)，但是通常驗(yàn)證電子郵件地址最簡單、最簡單的方法是使用正則表達(dá)式。

現(xiàn)在我們將擴(kuò)展我們的函數(shù)，使其可以將字段定義為可選。

<code></code>

要驗(yàn)證必需的電子郵件，您應(yīng)該將其調(diào)用為：

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

如果您想將其設(shè)置為可選：

<code></code>

JavaScript 不能單獨(dú)用于驗(yàn)證，但如果您擁有它，它會(huì)有很大幫助。您嵌入到 HTML 中的代碼越緊湊越好——它可以節(jié)省下載時(shí)間，搜索引擎也會(huì)喜歡您！

關(guān)于表單驗(yàn)證的常見問題 (FAQ)

客戶端驗(yàn)證和服務(wù)器端驗(yàn)證有什么區(qū)別？

客戶端驗(yàn)證是在表單數(shù)據(jù)發(fā)送到服務(wù)器之前使用 JavaScript 在用戶的瀏覽器中執(zhí)行的。它提供即時(shí)反饋并改善用戶體驗(yàn)。但是，可以通過禁用 JavaScript 或操作代碼來繞過它，因此它并不完全安全。

另一方面，服務(wù)器端驗(yàn)證是在提交表單數(shù)據(jù)后在服務(wù)器上執(zhí)行的。它更安全，因?yàn)橛脩魺o法繞過它。但是，它需要往返服務(wù)器，這可能會(huì)影響性能和用戶體驗(yàn)。因此，建議同時(shí)使用客戶端驗(yàn)證和服務(wù)器端驗(yàn)證，以獲得最佳的安全性和用戶體驗(yàn)。

如何在 PHP 中實(shí)現(xiàn)表單驗(yàn)證？

PHP 提供了多種表單驗(yàn)證函數(shù)。例如，您可以將 filter_var() 函數(shù)與不同的過濾器一起使用來驗(yàn)證和清理輸入數(shù)據(jù)。這是一個(gè)驗(yàn)證電子郵件地址的簡單示例：

$email = $_POST["email"]; if (!filter_var($email, FILTER_VALIDATE_EMAIL)) { echo "無效的電子郵件格式"; } 此代碼檢查提交的電子郵件地址是否格式正確。如果不是，則顯示錯(cuò)誤消息。

一些常見的驗(yàn)證技術(shù)是什么？

一些常見的驗(yàn)證技術(shù)包括必填字段、長度限制、模式匹配和數(shù)據(jù)類型檢查。必填字段確保用戶填寫所有必要信息。長度限制限制可以輸入的字符數(shù)。模式匹配檢查輸入是否與特定模式匹配，例如電子郵件地址或電話號(hào)碼。數(shù)據(jù)類型檢查確保輸入是正確的類型，例如數(shù)字或日期。

如何顯示驗(yàn)證錯(cuò)誤消息？

您可以使用 JavaScript 進(jìn)行客戶端驗(yàn)證或使用 PHP 進(jìn)行服務(wù)器端驗(yàn)證來顯示驗(yàn)證錯(cuò)誤消息。在 JavaScript 中，您可以使用 setCustomValidity() 方法來設(shè)置自定義驗(yàn)證消息。在 PHP 中，您可以將錯(cuò)誤消息存儲(chǔ)在變量中并在表單中顯示它們。

如何驗(yàn)證復(fù)選框？

您可以通過檢查復(fù)選框是否被選中來驗(yàn)證復(fù)選框。在 JavaScript 中，您可以使用 checked 屬性。在 PHP 中，您可以檢查復(fù)選框值是否出現(xiàn)在 $_POST 或 $_GET 中。

如何驗(yàn)證下拉列表？

您可以通過檢查是否選擇了有效選項(xiàng)來驗(yàn)證下拉列表。在 JavaScript 中，您可以使用 selectedIndex 屬性。在 PHP 中，您可以檢查所選值是否在有效值的數(shù)組中。

如何驗(yàn)證單選按鈕？

您可以通過檢查是否選擇了其中一個(gè)選項(xiàng)來驗(yàn)證單選按鈕。在 JavaScript 中，您可以循環(huán)遍歷單選按鈕并使用 checked 屬性。在 PHP 中，您可以檢查單選按鈕值是否出現(xiàn)在 $_POST 或 $_GET 中。

如何驗(yàn)證日期？

您可以通過檢查日期格式是否正確以及它是否為真實(shí)日期來驗(yàn)證日期。在 JavaScript 中，您可以使用 Date 對(duì)象。在 PHP 中，您可以使用 checkdate() 函數(shù)。

如何驗(yàn)證文件上傳？

您可以通過檢查文件大小、文件類型和文件擴(kuò)展名來驗(yàn)證文件上傳。在 JavaScript 中，您可以使用 files 屬性。在 PHP 中，您可以使用 $_FILES 數(shù)組。

如何防止 SQL 注入？

您可以使用預(yù)處理語句或參數(shù)化查詢來防止 SQL 注入，這些語句將 SQL 代碼與數(shù)據(jù)分開。這可以防止數(shù)據(jù)被解釋為代碼。在 PHP 中，您可以使用 PDO 或 MySQLi 擴(kuò)展來執(zhí)行預(yù)處理語句。

以上是在客戶端的形式驗(yàn)證的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！