这篇文章给大家分享的是有关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" >两次输入的密码不一致</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>
感谢各位的阅读!关于“jQuery表单验证之密码确认的示例分析”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!