使用 jQuery 簡化表單驗證-＆＃＆按-PHP中文網

在先前的教學中，我們討論如何使用 HTML5 中的一些輸入屬性和一些正規表示式來實現基本表單驗證。

在本教學中，您將學習如何使用 jQuery 外掛程式為您的網站添加簡單的表單驗證。

使用 jQuery 外掛程式驗證表單有很多用途。它為您提供了額外的功能，例如輕鬆顯示自訂錯誤訊息以及向 jQuery 表單驗證新增條件邏輯。驗證庫還可以幫助您在 HTML 表單中新增驗證，而無需對標記進行最少的更改或無需更改。有效性條件也可以隨時輕鬆新增、刪除或修改。

開始使用

我們將在本教程中使用 jQuery 驗證外掛程式。該插件提供了很多功能，還可以幫助您定義自己的驗證邏輯。

在我們開始在我們的領域中使用該插件之前，我們必須在我們的專案中包含必要的文件。有兩個不同的文件要包含。第一個是核心文件，其中包含插件的核心功能，包括從不同的驗證方法到一些自訂選擇器的所有內容。第二份文件包含驗證信用卡號和美國電話號碼等輸入的其他方法。

您可以透過 Bower 或 NPM 等套件管理器將這些檔案新增到您的專案中。您還可以直接獲取文件的 CDN 鏈接，並將它們添加到網頁上的 script 標記中。由於這是一個基於 jQuery 的插件，因此您還需要添加指向 jQuery 庫的連結。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"></script>

登入後複製

新增這些檔案後，您可以開始使用 validate 方法驗證任何表單。

驗證您的第一個表單

您可以開始使用此插件，而無需對標記進行任何重大更改。您可能需要更改的唯一一件事是，將 id 或 class 新增到您要驗證的表單（如果還沒有）。

這是一個基本表單的標記，我們將使用 jQuery 驗證外掛程式對其進行驗證。

<form id="basic-form" action="" method="post">
<p>
<label for="name">Name <span>(required, at least 3 characters)</span></label>
<input id="name" name="name" minlength="3" type="text" required>
</p>
<p>
<label for="email">E-Mail <span>(required)</span></label>
<input id="email" type="email" name="email" required>
</p>
<p>
<input class="submit" type="submit" value="SUBMIT">
</p>
</form>

登入後複製

我們使用的屬性與先前基於 HTML5 的表單驗證教學中使用的屬性相同。表單仍然會進行驗證，而無需我們新增任何 JavaScript。但是，使用插件進行驗證將使我們在無效輸入欄位的正下方顯示錯誤訊息。我們也可以根據需要設定錯誤的樣式。

要開始使用此外掛程式驗證表單，只需在網頁上新增以下 JavaScript 程式碼：

$(document).ready(function() {
$("#basic-form").validate();
});

登入後複製

這是基於您已經新增了所需的 JavaScript 檔案的假設。新增這些 JavaScript 行將確保您的表單已正確驗證並顯示所有錯誤訊息。這是一個工作演示。

該庫僅在必要時顯示錯誤訊息，從而盡可能做到用戶友好。例如，如果您透過選項卡瀏覽姓名和電子郵件欄位而沒有實際輸入任何訊息，則不會收到任何錯誤訊息。但是，如果您在名稱字段中僅輸入一個字元後嘗試移至電子郵件字段，您將收到一條有關至少輸入三個字元的錯誤訊息。

使用 label 元素將錯誤訊息注入到 DOM 中。它們都有一個 error 類，因此很容易套用您自己的樣式，就像我們在範例中所做的那樣。對於無效輸入也是如此，也會新增一個 error 類別。

`validate()` 方法的選項

在前面的範例中，我們只是呼叫了 validate() 方法，而不向其傳遞任何選項。但是，我們也可以將一個物件以及該物件內的許多選項傳遞給此方法。這些選項的值將決定表單外掛程式如何處理驗證、錯誤等。

如果您希望此外掛程式在驗證過程中忽略某些元素，您可以透過將類別或選擇器傳遞給 ignore() 來輕鬆實現。當插件驗證輸入時，它將忽略具有該特定選擇器的所有表單元素。

新增輸入欄位的驗證規則

您也可以將一些規則傳遞給 validate() 方法，以決定如何驗證輸入值。 rules 參數的值應該是具有鍵值對的物件。每種情況的關鍵是我們要驗證的元素的名稱。該鍵的值是一個對象，其中包含一組將用於驗證的規則。

您也可以使用depends 關鍵字向要驗證的不同欄位新增條件邏輯，並向其傳遞一個回呼函數，該函數傳回true 或 false。下面是一個使用簡單規則來定義如何驗證輸入的範例。

$(document).ready(function() {
$("#basic-form").validate({
rules: {
name : {
required: true,
minlength: 3
},
age: {
required: true,
number: true,
min: 18
},
email: {
required: true,
email: true
},
weight: {
required: {
depends: function(elem) {
return $("#age").val() > 50
}
},
number: true,
min: 0
}
}
});
});

登入後複製

在上面的代码片段中，键 name、age、email 和 weight 只是名称输入元素。每个键都有一个对象作为其值，对象中的键值对决定如何验证输入字段。

这些验证选项与您可以在表单标记中添加的属性类似。例如，将 required 设置为 true 将使该元素成为表单提交所需的元素。将 minlength 设置为 3 之类的值将强制用户在文本输入中输入至少 3 个字符。还有一些其他内置验证方法，文档页面上对此进行了简要描述。

在上述代码中需要注意的一件事是，如果年龄超过 50 岁，则使用 depends 有条件地将体重设为必填字段。这是通过返回 age 输入字段中输入的值超过 50，则在回调函数中返回 true。

创建您自己的错误消息

此插件还允许您为表单中的不同验证规则设置错误消息。首先，将 messages 键的值设置为一个对象，该对象包含输入字段的键值对和相应的错误消息。

下面是一个示例，它将显示每个输入字段的自定义错误消息。

messages : {
name: {
minlength: "Name should be at least 3 characters"
},
age: {
required: "Please enter your age",
number: "Please enter your age as a numerical value",
min: "You must be at least 18 years old"
},
email: {
email: "The email should be in the format: abc@domain.tld"
},
weight: {
required: "People with age over 50 have to enter their weight",
number: "Please enter your weight as a numerical value"
}
}

登入後複製

就像规则一样，messages 依赖于输入字段的名称。每个输入字段都将接受一个具有键值对的对象作为其值。每种情况的关键是必须遵循的验证规则。该值只是您想要在违反特定规则时显示的错误消息。

例如，如果 age 输入字段留空，将触发 required 错误消息。但是，如果您在输入字段中输入除数字之外的任何其他内容，则会触发 number 错误。

您会注意到的一件事是，如果您未提供自定义错误消息，该插件将显示验证规则的通用错误消息。尝试在以下演示中填写不同的值，您将看到自定义和通用错误消息按预期显示。

自定义错误消息的外观

有时，您可能希望将自己的类添加到有效和无效输入中，以便更具体地定位它们或更好地与现有主题集成。

您可以使用 errorClass 和 validClass 键更改添加到有效或无效输入元素的类。这可以帮助防止由于重复使用相同的类名而导致一些不必要的冲突。默认情况下， error 类被分配给每个无效的输入元素和标签。 valid 类被分配给每个有效的输入元素。

请务必记住，将 errorClass 设置为 fail-alert 将从无效元素中删除 error 类。您必须使用 errorClass: "error failure-alert" 将多个类分配给同一元素。 validClass 也是如此。

当用户输入有效的内容时，不会向表单添加任何其他标签。因此，来自 validClass 的类被分配给有效的输入元素。

以下代码片段基于前面的示例，向无效和有效元素添加自定义 CSS 类和样式。

唯一的附加 JavaScript 代码用于分配类。

$(document).ready(function() {
$("#basic-form").validate({
errorClass: "error fail-alert",
validClass: "valid success-alert",
// ... More validation code from previous example

登入後複製

这是我们将用来更改错误消息外观的 CSS：

label.error.fail-alert {
border: 2px solid red;
border-radius: 4px;
line-height: 1;
padding: 2px 0 6px 6px;
background: #ffe6eb;
}
input.valid.success-alert {
border: 2px solid #4CAF50;
color: green;
}

登入後複製

除了自定义错误消息之外，我们还向有效的输入元素添加我们自己的样式。这是一个 CodePen 演示，向我们展示最终结果。