表單驗證外掛jquery-validation以及案例
表單驗證外掛jquery-validation以及案例
1，獲取並引入：
（1）獲取：官網：https://jqueryvalidation.org/
【home】-》【files】-》【Download】-》【jquery-validation-1.19.3.zip/Source code（zip）】
-》解壓，使用的最關鍵的【dist 檔案】-》只要下面四個檔案
ps：min.js 是壓縮版本的，一般專案上線直接使用壓縮版本的，練習的話隨意~
(2) 引入順序，一定要：先引入jquery.js; 然後是 jquery.validate.js; 最後是 additional-methods.js
2， 將表單（表單 form元素 有id = "register-form"）與外掛進行繫結：$(‘#register-form’).validate({ });
3， 瞭解外掛的使用：官網：【DOCUMENTATION】->【Plugin Methods】-》[有非常多的屬性：使用方式都可以參照給的示例]-
{ • debug：true；~除錯模式，不提交表單
• onsubmit：true；~提交表單時做校驗
• submitHandler~表單驗證通過後，不提交表單，而是手動處理邏輯
• rules~ 指定表單驗證規則【key：是元素； value：是要求； 要求可以檢視官網，在【Methods】：
例如step 等等，有什麼作用，可以翻譯一下，或者在案例下測試一下】
常見規則： ▷ required：true；
▷ 自定義規則
• validClass~ 調整驗證通過時的類樣式名稱
• errorElement~修改錯誤資訊出現的元素，預設錯誤資訊提示出現在label裡，html中有for繫結的好處
• messages~設定對應規則驗證錯誤提示文字（messages 是鍵值對形式，key是元素，value是規則~jquery自帶，或者自自定義的規則）
• success~設定驗證通過時的提示
}
4，使用示例程式碼：
❀login_jqueryvalidation.js
$(function () { //使用jqueryvalidation驗證表單 $('#register').validate({ debug:true, // onsubmit:true, rules:{ 'mobiePhone': { required: true, //自定義的規則mobile_phone 啟動true mobile_phone:true }, }, //驗證格式錯誤時文字提示 messages:{ 'mobiePhone': { required:'手機號碼不能為空', mobile_phone:'手機號碼格式錯誤' } }, validClass: 'success', //驗證通過時的文字提示 success:function (error,element) { let tip = ''; switch (element.name){ case 'mobiePhone': tip ='手機號碼正確'; break; } error.text(tip).addClass('success'); } }); });
5，其他的程式碼：
❀ custValidation.js
/** * 功能:自定義正則表示式驗證手機號碼等通用格式 * 作者:一樂 * 時間:2021/8/9 * 地點:一樂樂家園 */ $(function () { $.validator.addMethod( 'mobile_phone', function( value ) { let reg = /^1[3458]\d{9}/; return reg.test(value); }); });
❀ login_jqueryvalidation.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>使用jqueryvalidation外掛</title> <!-- . 表示當前目錄 .. 表示當前目錄的上一級目錄。 ./表示當前目錄下的某個檔案或資料夾，視後面跟著的名字而定 ../表示當前目錄上一級目錄的檔案或資料夾，視後面跟著的名字而定。 --> <link rel="stylesheet" type="text/css" href="../css/login_jqueryvalidation.css"> </head> <body> <section> <div class="container" > <div class="logn"> <form id="register" method="post"> <h1>註冊賬號</h1> <div class="ipt-box"> <label for="mobiePhone">手機號碼</label> <div class="right"> <input type="text" name="mobiePhone" id="mobiePhone" placeholder="請輸入手機號碼" autocomplete="off"/> </div> </div> <div class="ipt-box"> <label for="idCard">身份證號碼</label> <div class="right"> <input type="text" name="idCard" id="idCard" placeholder="請輸入身份證號碼" autocomplete="off"/> </div> </div> <div class="ipt-box"> <label for="pwd">登入密碼</label> <div class="right"> <input type="password" name="pwd" id="pwd" placeholder="請輸入登入密碼" autocomplete="off"/> </div> </div> <div class="ipt-box"> <label for="re-pwd">確認密碼</label> <div class="right"> <input type="password" name="re-pwd" id="re-pwd" placeholder="請再次輸入登入密碼" autocomplete="off"/> </div> </div> <div class="ipt-box"> <label for="vali-code">驗證碼</label> <div class="right"> <div class="code"> <input type="text" name="vali-code" id="vali-code" autocomplete="off"> <label class="codeLb">獲取驗證碼</label> </div> </div> </div> <div class="registerBtn"> <input type="submit" value="註冊"/> </div> </form> </div> </div> </section> </body> <script type="text/javascript" src="../js/jquery/jquery-3.6.0.min.js"></script> <script type="text/javascript" src="../js/jquery-validation/jquery.validate.min.js"></script> <script type="text/javascript" src="../js/jquery-validation/additional-methods.min.js"></script> <script type="text/javascript" src="../js/custValidation.js"></script> <script type="text/javascript" src="../js/login_jqueryvalidation.js"></script> </html>
❀ login_jqueryvalidation.css
body{ margin:0; background-color: #b7f1e4; } .container{ width: 500px; margin: 50px auto; background-color: white; padding: 15px; box-sizing: border-box; } /* 文字 ~居中*/ h1{ text-align: center; } /* 左邊提示文字 */ .ipt-box { display: flex; justify-content: space-between; margin: 5px 0; box-sizing: border-box; } .ipt-box >label{ display: inline-block; width: 100px; height: 20px; text-align: justify; overflow: hidden; } .ipt-box > label:after{ display: inline-block; content: ''; width: 100%; } /* 右邊輸入框 */ .ipt-box .right{ width: calc(95% - 100px); } .ipt-box input{ width: 100%; height: 30px; border: 1px solid #cecccd; outline: none; border-radius: 4px; box-sizing: border-box; text-indent: 0.6em; /* 新增靠近時的過渡動畫效果 */ transition: all .3s linear; } .ipt-box input::placeholder{ color: #cecccd; } .ipt-box input:hover{ border: 1px solid #40a9ff; } .ipt-box input:focus { border: 1px solid #40a9ff; box-shadow: 0 0 0 2px #d1e9ff; } /* 輸入框error時 */ .ipt-box input.error{ border: 1px solid #e22018; box-shadow: 0 0 0 2px #eec7b9; } /* 輸入框success時 */ .ipt-box input.success{ border: 1px solid #91cdad; box-shadow: 0 0 0 1px #91cdad; } /* 輸入框error時文字提示 */ .ipt-box .right label.error{ color: #eec7b9; font-size: 13px; } /* 輸入框success時文字提示 */ .ipt-box .right label.success{ color: #91cdad; font-size: 13px; } /* 最後一行的驗證碼 */ .ipt-box .right .code{ width: 100%; display: flex; justify-content: space-between; } #vali-code{ width:40%; } .ipt-box .right .codeLb{ display: inline-block; width: 80px; height: 30px; border-radius: 4px; background-color: #1890ff; color: white; font-size: 12px; line-height: 30px; text-align: center; } /* 註冊 */ .registerBtn { width: 350px; height: 30px; margin: 30px auto; } /* label 標籤是行級，設定大小無效 */ .registerBtn > input{ display: inline-block; width: 100%; height: 100%; outline: none; border: none; background-color: #1890ff; background-size: 100px; border-radius: 4px; color: white; font-size: 12px; line-height: 30px; text-align: center; }
ps：案例中的小細節：
1，文字是 （有間隔的形式~ 實現justify，注意justify的前提是最後一行之上的內容 ~ 且行塊佈局設定一下大小）
【label 中文字的每個有間距的顯示樣式】
2，發現某個元素使用了jquery-validate外掛加入規則要求後，那個元素會新增上class=“error”；
同時html頁面會多一個label的文字提醒元素，class也是error。
咱就可以通過css，設定加入規則要求錯誤時的樣式顯示：）
3，自定義通用的驗證要求方法：咱封裝到一個檔案~custom-methods.js
（1）複製additional-methods.js檔案 中的$validator.addMethod…方法宣告;
（2）引數變數‘name’~自定義約束的屬性，約束規則寫到function裡；~返回值是布林型別的
~~~這樣就成功自定義一個規則要求了