console
var switchover = false;
$(".switchover").click(function () {
switchover = !switchover
if (switchover) {
$(".form-card.temporary").css("display", "none")
$(".form-card.alter").css("display", "block")
} else {
$(".form-card.temporary").css("display", "block")
$(".form-card.alter").css("display", "none")
}
});
// ------------------------------------------------------------------------
// 新增臨時帳號
$('#SectionNo').on('change', function () {
var text = $(this).find("option:selected").text()
if (text == "") {
$("#SectionNo").css("color", "#8D8D8D");
} else {
$("#SectionNo").css("color", "#000000");
}
})
$('#Rank').on('change', function () {
var text = $(this).find("option:selected").text()
if (text == "") {
$("#Rank").css("color", "#8D8D8D");
} else {
$("#Rank").css("color", "#000000");
}
})
$(function () {
$(".submit.temporary").click(function () {
checkUsername()
checkTelephone()
checkeSctionNo()
checkRank()
});
})
function checkUsername() {
$(".login-field.username > input").attr("placeholder", "請輸入姓名");
var username = $(".login-field.username > input").val();
if (username) {
$(".login-field.username").css("padding-bottom", "16px")
$(".login-field.username > input").css("background-color", "")
$(".login-field.username > .date-error").css("display", "none")
} else {
$(".login-field.username").css("padding-bottom", "27px")
$(".login-field.username > input").css("background-color", "#FFF2F2")
$(".login-field.username > .date-error").css("display", "block")
}
}
function checkTelephone() {
$(".login-field.telephone > input").attr("placeholder", "請輸入手提號碼");
var telephone = $(".login-field.telephone > input").val();
if (telephone) {
$(".login-field.telephone").css("padding-bottom", "16px")
$(".login-field.telephone > input").css("background-color", "")
$(".login-field.telephone > .date-error").css("display", "none")
} else {
$(".login-field.telephone").css("padding-bottom", "27px")
$(".login-field.telephone > input").css("background-color", "#FFF2F2")
$(".login-field.telephone > .date-error").css("display", "block")
}
}
function checkeSctionNo() {
var sectionNo = $(".login-field.sectionNo > select").val();
if (sectionNo) {
$(".login-field.sectionNo").css("padding-bottom", "16px")
$(".login-field.sectionNo > select").css("background-color", "")
$(".login-field.sectionNo > .date-error").css("display", "none")
} else {
$(".login-field.sectionNo").css("padding-bottom", "27px")
$(".login-field.sectionNo > select").css("background-color", "#FFF2F2")
$(".login-field.sectionNo > .date-error").css("display", "block")
}
}
function checkRank() {
var rank = $(".login-field.rank > select").val();
if (rank) {
$(".login-field.rank").css("padding-bottom", "16px")
$(".login-field.rank > select").css("background-color", "")
$(".login-field.rank > .date-error").css("display", "none")
} else {
$(".login-field.rank").css("padding-bottom", "27px")
$(".login-field.rank > select").css("background-color", "#FFF2F2")
$(".login-field.rank > .date-error").css("display", "block")
}
}
$(".login-field.username > input").blur(checkUsername);
$(".login-field.telephone > input").blur(checkTelephone);
$(".login-field.sectionNo > select").blur(checkeSctionNo);
$(".login-field.rank > select").blur(checkRank);
$(".login-field.username > input").focus(function () {
$(".login-field.username > input").attr("placeholder", "");
});
$(".login-field.telephone > input").focus(function () {
$(".login-field.telephone > input").attr("placeholder", "");
});
// -------------------------------------------
// 更改密碼
$(function () {
$(".submit.alter").click(function () {
checkOld()
checkNew()
checkAgain()
});
})
$(".login-field.old > input").focus(function () {
$(".login-field.old > input").attr("placeholder", "");
});
$(".login-field.newP > input").focus(function () {
$(".login-field.newP > input").attr("placeholder", "");
});
$(".login-field.again > input").focus(function () {
$(".login-field.again > input").attr("placeholder", "");
});
$(".login-field.old > input").blur(checkOld);
$(".login-field.newP > input").blur(checkNew);
$(".login-field.again > input").blur(checkAgain);
function checkOld() {
$(".login-field.old > input").attr("placeholder", "請輸入6-10個位的數字加英文（大細階無分別）");
var oldP = $(".login-field.old > input").val();
if (oldP) {
$(".login-field.old").css("padding-bottom", "16px")
$(".login-field.old > input").css("background-color", "")
$(".login-field.old > .date-error").css("display", "none")
} else {
$(".login-field.old").css("padding-bottom", "27px")
$(".login-field.old > input").css("background-color", "#FFF2F2")
$(".login-field.old > .date-error").css("display", "block")
}
}
function checkNew() {
$(".login-field.newP > input").attr("placeholder", "請輸入6-10個位的數字加英文（大細階無分別）");
var newP = $(".login-field.newP > input").val();
if (newP) {
$(".login-field.newP").css("padding-bottom", "16px")
$(".login-field.newP > input").css("background-color", "")
$(".login-field.newP > .date-error").css("display", "none")
} else {
$(".login-field.newP").css("padding-bottom", "27px")
$(".login-field.newP > input").css("background-color", "#FFF2F2")
$(".login-field.newP > .date-error").css("display", "block")
}
}
function checkAgain() {
$(".login-field.again > input").attr("placeholder", "請輸入6-10個位的數字加英文（大細階無分別）");
var again = $(".login-field.again > input").val();
if (again) {
$(".login-field.again").css("padding-bottom", "16px")
$(".login-field.again > input").css("background-color", "")
$(".login-field.again > .date-error").css("display", "none")
} else {
$(".login-field.again").css("padding-bottom", "27px")
$(".login-field.again > input").css("background-color", "#FFF2F2")
$(".login-field.again > .date-error").css("display", "block")
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录页面</title>
<script src="https://apps.bdimg.com/libs/jquer/2.1.4/jquery.min.js"></script>
</head>
<body>
<div class="main">
<div class="modal">
<div class="form-card-container">
<input class="switchover" type="button" value="切换" />
<div class="form-card temporary">
<div class="form-title">
<span class="title">新增臨時帳號</span>
</div>
<form class='form' action="" id="loginForm">
<span class="mandatory">*必填</span>
<div class="login-field username">
<label>姓名<span>*</span></label>
<input type="text" name="username" placeholder="請輸入姓名">
<span class="date-error">請輸入姓名</span>
</div>
<div class="login-field telephone">
<label >手提號碼<span>*</span></label>
<input type="text" name="" placeholder="請輸入手提號碼">
<span class="date-error">輸入手提號碼錯誤／此號碼已被註冊</span>
</div>
<div class="login-field sectionNo">
<label>組別編號<span>*</span></label>
<select class="select" id="SectionNo" name="">
<option class="hide" value ="">請選擇組別編號</option>
<option value ="1">1</option>
<option value ="2">2</option>
<option value="3">3</option>
</select>
<div class="triangle"></div>
<span class="date-error">請選擇組別編號</span>
</div>
<div class="login-field rank">
<label>職級<span>*</span></label>
<select class="select" id="Rank" name="">
<option class="hide" value ="">請選擇職級</option>
<option value ="1">管理员</option>
<option value ="2">测试员</option>
<option value="3">业务员</option>
</select>
<div class="triangle"></div>
<span class="date-error">請選擇職級</span>
</div>
<input class="submit temporary" type="button" value="提交" />
</form>
</div>
<div class="form-card alter">
<div class="form-title">
<span class="title">更改密碼</span>
</div>
<form class='form' action="post" id="loginForm">
<span class="mandatory">*必填</span>
<div class="login-field old">
<label>舊密碼<span>*</span></label>
<input type="password" name="" placeholder="請輸入舊密碼">
<span class="date-error">請輸入6-10個位的數字加英文（大細階無分別）</span>
</div>
<div class="login-field newP">
<label>新密碼<span>*</span></label>
<input type="password" name="" placeholder="請輸入6-10個位的數字加英文（大細階無分別）">
<span class="date-error">請輸入6-10個位的數字加英文（大細階無分別）</span>
</div>
<div class="login-field again">
<label>再次輸入新密碼<span>*</span></label>
<input type="password" name="" placeholder="請輸入6-10個位的數字加英文（大細階無分別）">
<span class="date-error">請輸入6-10個位的數字加英文（大細階無分別）/ 請輸入相同密碼</span>
</div>
<div class="login-field">
<label>身份證號碼<span>*</span></label>
<p class="prompt">請輸入身份證號碼的第1、4及5個數字到相應空格</p>
<input class="id-no grey-bg" type="text" maxlength="1" size="24">
<input class="id-no grey-bg" type="text" maxlength="1" size="24">
<input class="id-no" type="text" maxlength="1" size="24">
<input class="id-no grey-bg" type="text" maxlength="1" size="24">
<input class="id-no grey-bg" type="text" maxlength="1" size="24">
<input class="id-no" type="text" maxlength="1" size="24">
<input class="id-no" type="text" maxlength="1" size="24">
<input class="id-no grey-bg" type="text" maxlength="1" size="24">
(
<input class="id-no grey-bg" type="text" maxlength="1" size="24">
)
</div>
<input class="submit alter" type="button" value="更改密碼" />
</form>
</div>
</div>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
* {
box-sizing: border-box;
-webkit-font-smoothing: antialiased
}
.main {
width: 100%;
height: 100%;
}
.modal {
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: rgba(0, 0, 0, 0.5);
}
.form-card-container {
position: relative;
margin: 0 auto;
height: 100%;
}
.form-card {
position: absolute;
padding: 50px 100px 66px;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 502px;
height: 668px;
background: #FFFFFF 0% 0% no-repeat padding-box;
box-shadow: 5px 5px 10px #00000029;
border-radius: 6px;
}
.form-card.alter {
display: none;
}
.form-title {
width: 100%;
height: 41px;
margin-bottom: 30px;
}
.form-title img {
width: 50%;
height: 41px;
padding: 8px 15px 7px 0;
text-align: right;
}
.form-title .title {
width: 50%;
font: normal normal 600 15px/41px PingFang TC;
padding: 10px 0 11px 15px;
text-align: center;
letter-spacing: 1.5px;
color: #000000;
opacity: 1;
}
.form-title>* {
vertical-align: middle;
}
.form {
font-size: 12px;
line-height: 16px;
letter-spacing: 0.31px;
opacity: 1;
}
.form .mandatory{
text-align: left;
color: #E50013;
}
.form .login-field {
position: relative;
padding: 16px 0;
}
.form .login-field label {
text-align: left;
color: #000000;
display: inherit;
margin-bottom: 6px;
}
.form .login-field label span {
margin-left: 5px;
color: #E50013;
}
.form .login-field input {
display: block;
width: 302px;
height: 40px;
outline: 0;
border: 1px solid #B7B7B7;
border-radius: 4px;
text-indent: 5px;
font-size: 15px;
padding: 11px 16px 9px 16px;
}
form .login-field input::-webkit-input-placeholder{
letter-spacing: 0.16px;
font-size: 12px;
color: #8D8D8D;
opacity: 1;
}
.form .login-field .date-error {
display: none;
position: absolute;
bottom: 8px;
font-size: 10px;
color: #E50013;
letter-spacing: 0px;
word-break:keep-all;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.form .login-field .select {
display: block;
width: 302px;
height: 40px;
outline: 0;
border: 1px solid #B7B7B7;
color: #8D8D8D;
border-radius: 4px;
text-indent: 5px;
font-size: 15px;
padding: 11px 26px 9px 16px;
-moz-appearance:none;
-webkit-appearance:none;
appearance: none;
}
.form .login-field .select .hide {
display: none;
}
.form .login-field .triangle {
width: 6.4px;
height: 6.4px;
position: absolute;
border: 1px solid #707070;
border-top: 0;
border-left: 0;
right: 17px;
top: 55px;
transform: rotate(45deg);
}
.form .login-field .select option {
color: #8D8D8D;
background-color: #fff;
padding: 5px 0;
-webkit-appearance: none;
}
.form .login-field .prompt {
text-align: left;
font-size: 12px;
line-height: 17px;
height: 17px;
letter-spacing: 0.14px;
color: #8D8D8D;
}
.form .login-field input.id-no {
width: 24px;
height: 40px;
border: 1px solid #B7B7B7;
border-radius: 4px;
display: inline-block;
padding: 0;
text-align: left;
margin-right: 4px;
}
.form .login-field input.id-no.grey-bg {
background-color: #E2E2E2;
border: 1px solid #E2E2E2;
}
.form input[type="button"] {
margin-top: 34px;
display: block;
cursor: pointer;
width: 302px;
height: 40px;
color:#fff;
letter-spacing: 0px;
border-radius: 6px;
background: #E50013;
border: 0;
}