在客戶端的形式驗證

客戶端表單驗證至關重要——它節省時間和帶寬，並提供更多選項來指出用戶填寫表單時出錯的地方。話雖如此，但這並不意味著您不需要服務器端驗證。訪問您網站的用戶可能使用舊瀏覽器或禁用了 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中文網其他相關文章！