用户中心页面
???? 周末抽空給朋友做的頁(yè)面嘻嘻，發(fā)出來(lái)大家一起來(lái)瞅瞅，歡迎吐槽哈哈哈哈
??? 頁(yè)面效果圖：（小穎為了方便大家看到input框里我輸入了什么所以把 input 的 type 由 password 改成了 text ）
?????????
密碼規(guī)則：至少8個(gè)字符、至少一個(gè)大寫(xiě)字母、一個(gè)小寫(xiě)字母、一個(gè)數(shù)字、一個(gè)特殊字符。
代碼：
方法一：缺點(diǎn)? if??? 判斷太多了。
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>修改密碼</title><style type="text/css">body {width: 100%;height: 100%;margin: 0;padding: 0;}.user-center {width: 600px;margin: 50px auto;}.user-password {margin-bottom: 15px;}label.user-text {max-width: 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">密碼不正確，請(qǐng)重新輸入！</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">密碼格式不正確，請(qǐng)重新輸入！</span></div><div class="user-password"><label class="user-text">確認(rèn)密碼：</label><input type="password" id="againPassword" class="user-password"></input><span class="error-message" id="againError">兩次輸入的密碼不一致，請(qǐng)重新輸入！</span></div><div class="user-password"><button id="btnPassword" class="btn btn-success">確認(rèn)</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"; //這個(gè)值本應(yīng)是從數(shù)據(jù)庫(kù)里獲取的$("#oldPassword").blur(function() {if ($("#oldPassword").val() != ajaxPassword) {$("#oldError").text("密碼不正確，請(qǐng)重新輸入！");$("#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("密碼格式不正確，請(qǐng)重新輸入！");$("#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("兩次輸入的密碼不一致，請(qǐng)重新輸入！");$("#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("訪問(wèn)數(shù)據(jù)庫(kù)，保存新密碼");}});$("#btnCancel").click(function() {var inputs = $("input");inputs.each(function() {$(this).val(""); //遍歷得到的每一個(gè)jquery對(duì)象});});});</script> </body></html>?方法二：
<script type="text/javascript">$(function() {var ajaxPassword = "1234"; //這個(gè)值本應(yīng)是從數(shù)據(jù)庫(kù)里獲取的$("#oldPassword").blur(function() {if ($("#oldPassword").val() != ajaxPassword) {$("#oldPassword").attr('name', true);$("#oldError").text("密碼不正確，請(qǐng)重新輸入！");$("#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("密碼格式不正確，請(qǐng)重新輸入！");$("#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("兩次輸入的密碼不一致，請(qǐng)重新輸入！");$("#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("訪問(wèn)數(shù)據(jù)庫(kù)，保存新密碼");}});$("#btnCancel").click(function() {var inputs = $("input");inputs.each(function() {$(this).val(""); //遍歷得到的每一個(gè)jquery對(duì)象});});});</script>?
轉(zhuǎn)載于:https://www.cnblogs.com/yingzi1028/p/7045171.html
總結(jié)
- 上一篇： Windows下简单使用BPG图像压缩工
- 下一篇： 2019年6月