前端驗證，jquery.validate插件
- 2020 年 4 月 4 日
- 筆記
jQuery Validate
簡介：
jQuery Validate 插件為表單提供了強大的驗證功能，讓客戶端表單驗證變得更簡單，同時提供了大量的訂製選項，滿足應用程式各種需求。該插件捆綁了一套有用的驗證方法，包括 URL 和電子郵件驗證，同時提供了一個用來編寫用戶自定義方法的 API。所有的捆綁方法默認使用英語作為錯誤資訊，且已翻譯成其他 37 種語言。
該插件是由 Jörn Zaefferer 編寫和維護的，他是 jQuery 團隊的一名成員，是 jQuery UI 團隊的主要開發人員，是 QUnit 的維護人員。該插件在 2006 年 jQuery 早期的時候就已經開始出現，並一直更新至今。目前版本是 1.14.0。
使用：
導入 js 庫
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script> <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
驗證提示默認為英文，想要中文，需引入中文包，本地包在dist/localization/messages_zh.js
可以使用cdn
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
demo
1 // 在鍵盤按下並釋放及提交後驗證提交表單 2 $("#signupForm").validate({ 3 rules: { 4 firstname: "required", 5 lastname: "required", 6 username: { 7 required: true, 8 minlength: 2 9 }, 10 password: { 11 required: true, 12 minlength: 5 13 }, 14 confirm_password: { 15 required: true, 16 minlength: 5, 17 equalTo: "#password" 18 }, 19 email: { 20 required: true, 21 email: true 22 }, 23 topic: { 24 required: "#newsletter:checked", 25 minlength: 2 26 }, 27 agree: "required" 28 }, 29 messages: { 30 firstname: "請輸入您的名字", 31 lastname: "請輸入您的姓氏", 32 username: { 33 required: "請輸入用戶名", 34 minlength: "用戶名必需由兩個字母組成" 35 }, 36 password: { 37 required: "請輸入密碼", 38 minlength: "密碼長度不能小於 5 個字母" 39 }, 40 confirm_password: { 41 required: "請輸入密碼", 42 minlength: "密碼長度不能小於 5 個字母", 43 equalTo: "兩次密碼輸入不一致" 44 }, 45 email: "請輸入一個正確的郵箱", 46 agree: "請接受我們的聲明", 47 topic: "請選擇兩個主題" 48 } 49 })
至此，一個簡單的demo就完成了
總結：
- 引入js
- 看demo
- 根據需求進行修改
