jQuery表單驗證之密碼確認實例詳解
- 小云云原創
- 2018-01-11 13:50:393287瀏覽
本文主要為大家詳細介紹了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中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn