使用 jQuery 簡化表單驗證

在先前的教學中，我們討論如何使用 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 演示，向我们展示最终结果。

更改插件行为的更多选项

您可以通过设置 onfocusout、onkeyup 或 onclick 到 false。请记住，布尔 true 不是这些键的有效值。这基本上意味着，如果您希望插件验证或失去对按键事件的关注，只需保持这些选项不变即可。

您也可以選擇更改出現錯誤的元素。預設情況下，該外掛程式使用 label 元素顯示所有錯誤訊息，但您可以使用 errorElement 將其變更為 em 或任何其他元素鑰匙。然後，可以使用 wrapper 鍵將錯誤元素本身包裝在另一個 HTML 元素中。

這些是您在驗證表單時可能會使用的一些最常見的選項。不過，如果您想要更改錯誤訊息的位置或將它們組合在一起，那麼還有一些其他驗證選項可能會派上用場。

CodeCanyon 上的 jQuery 表單驗證、JavaScript 和 jQuery 表單

學習如何自己進行簡單的表單驗證是一項很棒的技能。但您可以透過從 CodeCanyon 下載這些有用的 jQuery 和 JavaScript 表單來獲得更深入的了解：

1。帶有步驟表單產生器的 jQuery 步驟精靈：Timon 步驟表單

#如果您想建立多步驟表單，Timon Step Form 下載非常適合您。它具有多種表單元素和過渡效果，您可以使用它們來自訂您的工作。 Timon 還具有拖放建構器，這意味著您無需任何編碼知識即可建立表單。它還具有 jQuery 表單驗證。

2.只是高階表單

#閱讀此購買的名稱將讓您確切地知道您在這裡得到的是什麼。但這些形式的內涵遠不止表面看上去的那麼簡單。包含的 110 多個表單可供使用，或者您也可以使用該框架為自己製作獨特的表單。

3。天空形態

#我們用高度可自訂的天空形態完善了我們的清單。它具有現代元素和多種配色方案。也設計了六種狀態，包括懸停、焦點等。除了這些功能和跨瀏覽器相容性之外，Sky Forms 中還有 300 多個向量圖示。

最終想法

在本教程中，我們學習如何使用 jQuery 外掛程式將表單驗證提升到一個新的水平。使用簡單的 JavaScript 表單驗證為我們提供了對基本 HTML 驗證的更多控制。例如，您可以輕鬆控制當輸入填充無效值時如何以及何時顯示不同的錯誤訊息。

類似地，您也可以指定外掛程式是否應跳過某些特定元素的驗證。我強烈建議您閱讀此插件的文檔以及有關如何正確使用它的一些最佳實踐。

在我們的下一個教學中，您將了解更多基於 JavaScript 的工具和插件，以幫助您輕鬆建立和驗證表單。

當您在這裡時，請查看我們關於 JavaScript 表單和表單驗證的其他一些文章！

以上是使用 jQuery 簡化表單驗證的詳細內容。更多資訊請關注PHP中文網其他相關文章！