jQuery Validate是一個非常流行的jQuery插件,通常用于表單驗證。但是,您可能不知道的是,它也可以用于非表單驗證。因此,在本文中,我們將探討如何使用jQuery Validate進行非表單驗證。
首先,您需要引入jQuery Validate插件。可以通過以下方式在HTML文件頭部引入:
<head> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script> </head>
接著,我們可以編寫自定義規則,并將其傳遞給驗證器。以下是一個例子:
<script> $.validator.addMethod("verifyEmail", function(value, element) { var regEx = /^([\w-\.]+)@([\w-]+\.)+([\w-]{2,4})$/; return regEx.test(value); }, "請輸入有效的電子郵件地址。"); $(document).ready(function() { $("#email").on("blur", function() { if ($(this).valid()) { alert("電子郵件地址有效。"); } }); }); </script>
上面的代碼添加了一個名為verifyEmail的自定義規則,該規則使用正則表達式驗證電子郵件地址的有效性。然后,在$(document).ready函數中,我們將有效性檢查綁定到ID為“email”的元素的失去焦點事件上。如果輸入的電子郵件地址有效,將彈出一個提示框。
除了自定義規則,jQuery Validate插件還提供了一些內置規則,包括required、email、maxlength和minlength等等。你可以在文檔中找到所有可用規則的列表。
翻到本文開始處,您會看到用于引入jQuery Validate插件的代碼。請注意,我們使用了cdn.jsdelivr.net服務來獲取該插件的最新版本。這是一種流行的方式,因為它可以讓您免費使用CDN提供商的帶寬和存儲資源,以減輕自己的服務器負載。
雖然我們在本文中沒有詳細探討jQuery Validate的所有功能和選項,但是您可以在插件的官方文檔中查找所有的細節。希望這篇文章對您有所幫助并激發了您的靈感。
下一篇vue的確認框