表單驗證外掛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裡；~返回值是布林型別的
~~~這樣就成功自定義一個規則要求了