周末抽空给朋友做的页面嘻嘻，发出来大家一起来瞅瞅，欢迎吐槽哈哈哈哈
页面效果图：（小颖为了方便大家看到input框里我输入了什么所以把 input 的 type 由 password 改成了 text ）
密码规则：至少8个字符、至少一个大写字母、一个小写字母、一个数字、一个特殊字符。
代码：
方法一：缺点 if 判断太多了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>修改密码</title>
<style type="text/css">
body {
100%;
height: 100%;
margin: 0;
padding: 0;
}
.user-center {
600px;
margin: 50px auto;
}
.user-password {
margin-bottom: 15px;
}
label.user-text {
max- 100%;
margin-bottom: 5px;
font-weight: 700;
}
label.new {
padding-left: 15px;
}
input.user-password {
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}
.error-message {
display: none;
color: #F44336;
padding-left: 10px;
}
.btn {
margin-top: 5px;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
line-height: 1.42857143;
cursor: pointer;
border: 1px solid transparent;
border-radius: 4px;
}
.btn-success {
color: #fff;
background-color: #5cb85c;
border-color: #4cae4c;
margin: 0px 75px;
}
</style>
</head>
<body>
<div class="user-center">
<div class="user-password">
<label class="user-text">原始密码：</label>
<input type="password" id="oldPassword" class="user-password"></input>
<span class="error-message" id="oldError">密码不正确，请重新输入！</span>
</div>
<div class="user-password">
<label class="user-text new">新密码：</label>
<input type="password" id="newPassword" class="user-password"></input>
<span class="error-message" id="newError">密码格式不正确，请重新输入！</span>
</div>
<div class="user-password">
<label class="user-text">确认密码：</label>
<input type="password" id="againPassword" class="user-password"></input>
<span class="error-message" id="againError">两次输入的密码不一致，请重新输入！</span>
</div>
<div class="user-password">
<button id="btnPassword" class="btn btn-success">确认</button>
<button id="btnCancel" class="btn btn-cancel">取消</button>
</div>
</div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function() {
var oldError = false;
var newError = false;
var againError = false;
var ajaxPassword = "1234"; //这个值本应是从数据库里获取的
$("#oldPassword").blur(function() {
if ($("#oldPassword").val() != ajaxPassword) {
$("#oldError").text("密码不正确，请重新输入！");
$("#oldError").show();
oldError = true;
} else {
oldError = false;
$("#oldError").hide();
}
});
$("#newPassword").blur(function() {
var str = $("#newPassword").val();
if (str.length < 8 || !/[0-9]+/.test(str) || !/[A-Z]+/.test(str) || !/[a-z]+/.test(str) ||
!/[`!@#_$%^&*(){};,.?/'"]/.test(str)) {
newError = true;
$("#newError").text("密码格式不正确，请重新输入！");
$("#newError").show();
} else {
newError = false;
$("#newError").hide();
}
});
$("#againPassword").blur(function() {
var pwd1 = $("#newPassword").val();
var pwd2 = $("#againPassword").val();
if (pwd2 != pwd1) {
againError = true;
$("#againError").text("两次输入的密码不一致，请重新输入！");
$("#againError").show();
} else {
againError = false;
$("#againError").hide();
}
});
$("#btnPassword").click(function() {
var pwd1 = $("#oldPassword").val();
var pwd2 = $("#newPassword").val();
var pwd3 = $("#againPassword").val();
if (!pwd1) {
$("#oldError").text("密码不能为空！");
$("#oldError").show();
} else if (oldError) {
$("#oldError").show();
} else {
oldError = false;
$("#oldError").hide();
}
if (!pwd2) {
$("#newError").text("密码不能为空！");
$("#newError").show();
} else if (newError) {
$("#newError").show();
} else {
newError = false;
$("#newError").hide();
}
if (!pwd3) {
$("#againError").text("密码不能为空！");
$("#againError").show();
} else if (againError) {
$("#againError").show();
} else {
againError = false;
$("#againError").hide();
}
if (pwd1 && pwd2 && pwd3 && !oldError && !newError && !againError) {
console.log("访问数据库，保存新密码");
}
});
$("#btnCancel").click(function() {
var inputs = $("input");
inputs.each(function() {
$(this).val(""); //遍历得到的每一个jquery对象
});
});
});
</script>
</body>
</html>
方法二：
<script type="text/javascript">
$(function() {
var ajaxPassword = "1234"; //这个值本应是从数据库里获取的
$("#oldPassword").blur(function() {
if ($("#oldPassword").val() != ajaxPassword) {
$("#oldPassword").attr('name', true);
$("#oldError").text("密码不正确，请重新输入！");
$("#oldError").show();
} else {
$("#oldError").hide();
$("#oldPassword").attr('name', false);
}
});
$("#newPassword").blur(function() {
var str = $("#newPassword").val();
if (str.length < 8 || !/[0-9]+/.test(str) || !/[A-Z]+/.test(str) || !/[a-z]+/.test(str) ||
!/[`!@#_$%^&*(){};,.?/'"]/.test(str)) {
$("#newPassword").attr('name', true);
$("#newError").text("密码格式不正确，请重新输入！");
$("#newError").show();
} else {
$("#newPassword").attr('name', false);
$("#newError").hide();
}
});
$("#againPassword").blur(function() {
var pwd1 = $("#newPassword").val();
var pwd2 = $("#againPassword").val();
if (pwd2 != pwd1) {
$("#againPassword").attr('name', true);
$("#againError").text("两次输入的密码不一致，请重新输入！");
$("#againError").show();
} else {
$("#againPassword").attr('name', false);
$("#againError").hide();
}
});
$("#btnPassword").click(function() {
var inputs = $("input");
var pwd1 = $("#oldPassword").val();
var pwd2 = $("#newPassword").val();
var pwd3 = $("#againPassword").val();
var name1 = $("#oldPassword").attr('name');
var name2 = $("#newPassword").attr('name');
var name3 = $("#againPassword").attr('name');
inputs.each(function(index) {
if (!$(this).val()) {
$("span").eq(index).text("密码不能为空！");
$("span").eq(index).show();
} else if ($(this).attr('name') == "true") {
$("span").eq(index).show();
} else {
$("span").eq(index).hide();
}
});
if (pwd1 && pwd2 && pwd3 && name1 == "false" && name2 == "false" && name3 == "false") {
console.log("访问数据库，保存新密码");
}
});
$("#btnCancel").click(function() {
var inputs = $("input");
inputs.each(function() {
$(this).val(""); //遍历得到的每一个jquery对象
});
});
});
</script>