javascript密码验证

本文为大家分享了javascript密码验证的实现方法，欢迎大家阅读。

     

javascript密码验证代码如下

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>密码验证</title>

<script src="js/jquery-1.11.1.js"></script>

<script>

$(function(){

$(document).on('blur','input',function(){

var $password=$('#password').val();

var $password_again=$('#password_again').val();

if(!$password){

$("#password").addClass('redBorder').next('label').show().html('不能为空');;

return false;

}else if(!$password_again){

$("#password_again").addClass('redBorder').next('label').show().html('不能为空');

return false;

}else{

$('input').removeClass('redBorder').next('label').empty();

if($password_again==$password){

$("#password,#password_again").next('label').show().html('两次密码一致').addClass('valid');

}else if($password_again!=$password){

$("#password,#password_again").addClass('redBorder').next('label').show().html('两次密码不一致').removeClass('valid').addClass('erro');

}

}

})

})

</script>

<style>

.redBorder{

border: 1px solid red;

}

.erro{

background: url('images/unchecked.gif') no-repeat;

padding-left: 16px;

}

.valid{

background: url('images/checked.gif') no-repeat;

width: 16px;

height: 16px;

}

</style>

</head>

<body>

<div>

<label>

输入密码：<input type="text" placeholder="输入密码" id="password">

<label id="password-erro" class="erro" style="display:none;"></label>

</label>

<br><br>

<label>

验证密码：<input type="text" placeholder="输入相同密码" id="password_again">

<label id="password-erro" class="erro" style="display:none;"></label>

</label>

<br><br>

<button style="margin-left:80px;">submit</button>

</div>

</body>

</html>

希望本文对大家学习javascript程序设计有所帮助。