在之前的教程中，我們討論了如何使用 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 驗證插件對其進行驗證。
我們使用的屬性與之前基于 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 有條件地將體重設為必填字段。這是通過返回 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" } } <p>就像規則一樣，messages 依賴于輸入字段的名稱。每個輸入字段都將接受一個具有鍵值對的對象作為其值。每種情況的關鍵是必須遵循的驗證規則。該值只是您想要在違反特定規則時顯示的錯誤消息。</p> <p>例如，如果 age 輸入字段留空，將觸發 required 錯誤消息。但是，如果您在輸入字段中輸入除數字之外的任何其他內容，則會觸發 number 錯誤。</p> <p>您會注意到的一件事是，如果您未提供自定義錯誤消息，該插件將顯示驗證規則的通用錯誤消息。嘗試在以下演示中填寫不同的值，您將看到自定義和通用錯誤消息按預期顯示。</p> <p><iframe src="https://codepen.io/tutsplus/embed/zXJOrz/?height=600&theme-id=0&default-tab=result" scrolling="no" allowfullscreen="true" loading="lazy" width="850" height="640" frameborder="no"></iframe></p> <h3>自定義錯誤消息的外觀</h3> <p>有時，您可能希望將自己的類添加到有效和無效輸入中，以便更具體地定位它們或更好地與現有主題集成。</p> <p>您可以使用 errorClass 和 validClass 鍵更改添加到有效或無效輸入元素的類。這可以幫助防止由于重復使用相同的類名而導致一些不必要的沖突。默認情況下， error 類被分配給每個無效的輸入元素和標簽。 valid 類被分配給每個有效的輸入元素。</p> <p>請務必記住，將 errorClass 設置為 fail-alert 將從無效元素中刪除 error 類。您必須使用 errorClass: "error failure-alert" 將多個類分配給同一元素。 validClass 也是如此。</p> <p>當用戶輸入有效的內容時，不會向表單添加任何其他標簽。因此，來自 validClass 的類被分配給有效的輸入元素。</p> <p>以下代碼片段基于前面的示例，向無效和有效元素添加自定義 CSS 類和樣式。</p> <p>唯一的附加 JavaScript 代碼用于分配類。</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:javascript;toolbal:false;">$(document).ready(function() { $("#basic-form").validate({ errorClass: "error fail-alert", validClass: "valid success-alert", // ... More validation code from previous example </pre><div class="contentsignin"></div></div> <p>這是我們將用來更改錯誤消息外觀的 CSS：</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbal:false;">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; } </pre><div class="contentsignin"></div></div> <p>除了自定義錯誤消息之外，我們還向有效的輸入元素添加我們自己的樣式。這是一個 CodePen 演示，向我們展示最終結果。</p> <p><iframe src="https://codepen.io/tutsplus/embed/gOwbYzQ/?height=600&theme-id=0&default-tab=result" scrolling="no" allowfullscreen="true" loading="lazy" width="850" height="640" frameborder="no"></iframe></p> <h3>更改插件行為的更多選項</h3> <p>您可以通過設置 onfocusout、onkeyup 或 onclick 到 false。請記住，布爾 true 不是這些鍵的有效值。這基本上意味著，如果您希望插件驗證或失去對按鍵事件的關注，只需保持這些選項不變即可。</p> <p>您還可以選擇更改出現錯誤的元素。默認情況下，該插件使用 label 元素顯示所有錯誤消息，但您可以使用 errorElement 將其更改為 em 或任何其他元素鑰匙。然后，可以使用 wrapper 鍵將錯誤元素本身包裝在另一個 HTML 元素中。</p> <p>這些是您在驗證表單時可能會使用的一些最常見的選項。不過，如果您想要更改錯誤消息的位置或將它們組合在一起，那么還有一些其他驗證選項可能會派上用場。</p> <h2>CodeCanyon 上的 jQuery 表單驗證、JavaScript 和 jQuery 表單</h2> <p>學習如何自己進行簡單的表單驗證是一項很棒的技能。但您可以通過從 CodeCanyon 下載這些有用的 jQuery 和 JavaScript 表單來獲得更深入的了解：</p> <h3>1。帶有步驟表單生成器的 jQuery 步驟向導：Timon 步驟表單 </h3> <p><img src="https://img.php.cn/upload/article/000/465/014/169373718285310.jpg" alt="使用 jQuery 簡化表單驗證"></p> <p>如果您想構建多步驟表單，Timon Step Form 下載非常適合您。它具有多種表單元素和過渡效果，您可以使用它們來自定義您的工作。 Timon 還具有拖放構建器，這意味著您無需任何編碼知識即可構建表單。它還具有 jQuery 表單驗證。 </p> <h3><span class="sectionnum">2.只是高級表單</span></h3> <p><img src="https://img.php.cn/upload/article/000/465/014/169373718373067.jpg" alt="使用 jQuery 簡化表單驗證"></p> <p>閱讀此購買的名稱將讓您確切地知道您在這里得到的是什么。但這些形式的內涵遠不止表面看上去的那么簡單。包含的 110 多個表單可供使用，或者您也可以使用該框架為自己制作獨特的表單。</p> <h3>3。天空形態 </h3> <p><img src="https://img.php.cn/upload/article/000/465/014/169373718378584.jpg" alt="使用 jQuery 簡化表單驗證"></p> <p>我們用高度可定制的天空形態完善了我們的列表。它具有現代元素和多種配色方案。還設計了六種狀態，包括懸停、焦點等。除了這些功能和跨瀏覽器兼容性之外，Sky Forms 中還有 300 多個矢量圖標。</p> <h2>最終想法</h2> <p>在本教程中，我們學習了如何使用 jQuery 插件將表單驗證提升到一個新的水平。使用簡單的 JavaScript 表單驗證為我們提供了對基本 HTML 驗證的更多控制。例如，您可以輕松控制當輸入填充無效值時如何以及何時顯示不同的錯誤消息。</p> <p>類似地，您還可以指定插件是否應跳過某些特定元素的驗證。我強烈建議您閱讀此插件的文檔以及有關如何正確使用它的一些最佳實踐。</p> <p>在我們的下一個教程中，您將了解更多基于 JavaScript 的工具和插件，以幫助您輕松創建和驗證表單。</p> <p>當您在這里時，請查看我們關于 JavaScript 表單和表單驗證的其他一些帖子！</p>
