jQuery表單驗證之密碼確認實例詳解
本文主要為大家詳細介紹了jQuery表單驗證之密碼確認的實作程式碼，具有一定的參考價值，有興趣的小夥伴們可以參考一下，希望能幫助大家。
眾所周知，在修改密碼時會需要兩次輸入密碼。這時如何確保兩個密碼框都有內容？兩個密碼框中是一致的？如果一個沒有輸入會給提示？ OK這一切都可以用JS來實現，具體想法很簡單啦，就是寫事件取得dom節點，判斷物件的取值呀？
那麼寫什麼事件？應該是onblur事件~。而且要為兩個密碼框都加上失去焦點的blur事件。利用jQuery比較方便勒。
話不多說，直接上程式碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>password验证</title>
<script src="jquery/jquery-3.1.1.min.js" type="text/javascript"></script>
</head>
<body>
<form ation="psot" method="">
<label for="password1">请输入密码：</label>
<input id="password" name="password" onblur="checkpas1();" required="true" type="password"/>
<br/>
<label for="password1">请确认密码：</label>
<input type="password" name="repassword" id="repassword" required="true" onChange="checkpas();" />
<span class="tip" style="color: red;">两次输入的密码不一致</span><br>
<input type="button" name="submit" value="提交" onclick="checkpas2();"/>
</form>
<script>
$(".tip").hide();
function checkpas1(){//当第一个密码框失去焦点时，触发checkpas1事件
var pas1=document.getElementById("password").value;
var pas2=document.getElementById("repassword").value;//获取两个密码框的值
if(pas1!=pas2&&pas2!="")//此事件当两个密码不相等且第二个密码是空的时候会显示错误信息
$(".tip").show();
else
$(".tip").hide();//若两次输入的密码相等且都不为空时，不显示错误信息。
}
function checkpas(){//当第一个密码框失去焦点时，触发checkpas2件
var pas1=document.getElementById("password").value;
var pas2=document.getElementById("repassword").value;//获取两个密码框的值
if(pas1!=pas2){
$(".tip").show();//当两个密码不相等时则显示错误信息
}else{
$(".tip").hide();
}
}
function checkpas2(){//点击提交按钮时，触发checkpas2事件，会进行弹框提醒以防无视错误信息提交
var pas3=document.getElementById("password").value;
var pas4=document.getElementById("repassword").value;
if(pas3!=pas4){
alert("两次输入的密码不一致！");
return false;
}
}
</script>
</body>
</html>
</html>希望大家能去理解程式碼，其實還是比較簡單的，多寫寫就會了。我也是才上手的。說的不對的，希望大佬指出來
相關推薦:
AngularJS實作的取得焦點及失去焦點時的表單驗證功能詳解
#以上是jQuery表單驗證之密碼確認實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
熱門話題
win11提示若要繼續,請輸入管理員使用者名稱和密碼怎麼解決?
Apr 11, 2024 am 09:10 AM
當使用Win11系統時，有時會遇到需要輸入管理員使用者名稱和密碼的提示，本文將探討在遇到這種情況時應該如何處理。方法一：1、點選【Windows標誌】，然後按【Shift+重啟】進入安全模式；或這樣進入安全模式：點選開始選單，選擇設定。選擇「更新與安全」；選擇「恢復」中的「立即重新啟動」；重新啟動進入選項後選擇－疑難排解－進階選項－啟動設定—&mdash
如何使用手機設定路由器WiFi密碼（以手機為工具）
Apr 24, 2024 pm 06:04 PM
無線網路已成為人們生活中不可或缺的一部分、在當今數位化的世界中。保護個人無線網路的安全性卻顯得格外重要、然而。設定強密碼是確保你的WiFi網路不會被他人入侵的關鍵。保障你的網路安全，本文將詳細介紹如何使用手機修改路由器WiFi密碼。 1.開啟路由器管理頁面-在手機瀏覽器中開啟路由器管理頁面、透過輸入路由器的預設IP位址。 2.輸入管理員使用者名稱和密碼-以獲得存取權限，在登入頁面中輸入正確的管理員使用者名稱和密碼。 3.導覽至無線設定頁面-尋找並點選進入無線設定頁面，在路由器管理頁面中。 4.找到當前Wi
密碼不正確，小心BitLocker警告
Mar 26, 2024 am 09:41 AM
本文將探討如何解決密碼錯誤的問題，特別是在處理BitLocker警告時需要小心。當在BitLocker中多次輸入錯誤密碼以解鎖磁碟機時，就會觸發這個警告。通常，這個警告出現是因為系統設定了限制錯誤登入嘗試的策略（通常是允許3次登入嘗試）。在這種情況下，使用者會收到相應的警告訊息。完整的警告訊息如下:輸入的密碼不正確，請注意-連續輸入錯誤密碼會導致帳戶被鎖定，這是為了保護您的資料安全。如果需要解鎖帳戶，您將需要使用BitLocker恢復金鑰。密碼不正確，小心BitLocker警告當您登入電腦時收到
手機修改wifi密碼教學（簡單操作）
Apr 26, 2024 pm 06:25 PM
無線網路已成為我們生活中不可或缺的一部分、隨著網路的快速發展。為了保護個人資訊和網路安全，定期更改wifi密碼是非常重要的、然而。幫助大家更能保護家庭網路安全，本文將為大家介紹如何利用手機修改wifi密碼的詳細教學。 1.了解wifi密碼的重要性wifi密碼是保護個人資訊和網路安全的道防線，在網路時代、了解其重要性可以更好地理解為什麼需要定期修改密碼。 2.確認手機連接到wifi首先確保手機已連接到要修改密碼的wifi網路上，在修改wifi密碼之前。 3.開啟手機設定選單進入手機的設定選單、在手
Win10密碼不符合密碼原則要求咋辦? 電腦密碼不符合政策要求解決方法
Jun 25, 2024 pm 04:59 PM
在Windows10系統中，密碼原則是一套安全性規則，確保使用者設定的密碼符合一定的強度和複雜性要求，而係統提示您的密碼不符合密碼原則要求則通常意味著您的密碼沒有達到微軟設定的複雜度、長度或字元種類的標準，那麼這種情況要如何避免呢？使用者可以直接的找到本地電腦策略下的密碼策略來進行操作就可以了，下面就一起來看看吧。不符合密碼原則規範的解決方法修改密碼長度：根據密碼原則要求，我們可以嘗試增加密碼的長度，例如將原來的6位密碼改為8位或更長。新增特殊字符：密碼策略通常要求包含特殊字符，如@、#、$等。我
win10電腦開機密碼忘了怎麼進入系統_win10電腦忘記開機密碼的處理方法
Mar 28, 2024 pm 02:35 PM
1.在另一台電腦上下載安裝小白一鍵重裝系統工具，插入空u盤製作u盤啟動盤，具體的教程可以參考：2、把U盤啟動盤插到需要更改密碼的電腦重啟，按啟動熱鍵，一般啟動熱鍵為F12、F8、F9、F10、ESC其中一個。接著出現啟動介面，選擇U盤的選項回車進入。 3.選擇【1】啟動win10x64PE按回車確定。 4.選擇桌面上的密碼修改的工具，雙擊開啟。 5.接著出現帳戶名稱列表，選取需要更改密碼的帳戶開啟。 6.點選下方的修改密碼指令，輸入兩次新的密碼，然後點選OK，儲存變更。 7.最後拔掉U盤，重開機就可以正常
Linux系統中的使用者密碼儲存機制解析
Mar 20, 2024 pm 04:27 PM
Linux系統中的使用者密碼儲存機制解析在Linux系統中，使用者密碼的儲存是非常重要的安全機制之一。本文將解析Linux系統中使用者密碼的儲存機制，包括密碼的加密儲存、密碼的驗證過程以及如何安全地管理使用者密碼。同時，將透過具體的程式碼範例展示密碼儲存的實際操作流程。一、密碼的加密儲存在Linux系統中，使用者密碼並不是以明文的形式儲存在系統中，而是經過加密後儲存。 L
如何為excel設定密碼
Mar 21, 2024 am 09:00 AM
前幾天表弟找我訴苦說用excel辛苦做了一大堆數據，結果後來被同事給修改了，當時不知道情況，發給老闆後被臭罵了一頓。這確實挺讓人無奈的，有的人就是看你不順眼，就是想故意整你，離開學校步入社會以後，你會發現背後捅刀子的人越來越多。除了安慰表弟幾句以外，我還給了表弟一個意見，如果怕以後再遇到這樣的事情，那就把excel表格設定密碼，除了你可以打開以外，別人誰都打不開。廣大網友們，如果你也怕自己的excel表格被別人偷偷修改，也該設定密碼的。 excel密碼表格如何設定密碼？跟我一起來了解一下吧！ 1.
