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

為什么客戶端驗證很重要？

使用客戶端驗證有兩個很好的理由：

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

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

兩種主要的驗證方法

客戶端表單驗證的兩種主要方法是：

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

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

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

如何驗證表單

例如，以下代碼片段：

<code><br>
function validateMyForm() { <br>
if (parseInt(document.forms[0].phone.value) ?<br>
 ? ? ? ?!= document.forms[0].phone.value) { <br>
alert('請輸入電話號碼，僅限數(shù)字'); <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，它始終指向當(dāng)前對象。這使我們的代碼更具可移植性，并節(jié)省了打字時間。

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

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

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

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

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

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

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

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

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

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

onsubmit="return (
validateNumber(this.phone, '請輸入電話
號碼，僅限數(shù)字', 5, 10) &&
validateString(this.firstName, '請輸入
您的名字', 3, 15) &&
validateString(this.lastName, '請輸入
您的姓氏', 3, 15)
);"> 代碼要求所有驗證規(guī)則都評估為真（使用邏輯 AND - &&）。仔細(xì)觀察就會發(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>

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

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

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

<code></code>

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

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

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

<code></code>

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

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

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

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

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

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

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

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

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

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

如何顯示驗證錯誤消息？

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

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

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

如何驗證下拉列表？

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

如何驗證單選按鈕？

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

如何驗證日期？

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

如何驗證文件上傳？

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

如何防止 SQL 注入？

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

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