最近在著手一個類似于花瓣網(wǎng)圖片門戶網(wǎng)站(社交類)息尺。第一次做項目改含，然后沒有一起搭伙的挪蹭，orzzzzzzz.這兩天實現(xiàn)了一下登陸與注冊頁面(很簡陋的).
?HTML/CSS就不放出來了并巍，就上一些JS源碼(很丑),不過思路還是清楚的吧妇萄？一下代碼都是初稿锭魔，等網(wǎng)站大致框架搭建好后例证，再回來優(yōu)化代碼，完善事務邏輯迷捧。
首先织咧，獲取可視窗口的大小，然后根據(jù)窗口大小漠秋，將登陸框／注冊框放到可視窗口中間笙蒙。主要針對手機平板PC三者
function respond() {
var winWidth;
var winHeight;
if(window.innerWidth){
winWidth = window.innerWidth;
}else if((document.body) && (document.body.clientWidth))
winWidth = document.body.clientWidth;
if(window.innerHeight){
winHeight = window.winHeight;
} else if((document.body) && (document.body.clientHeight))
winHeight = document.body.clientHeight;
var para = document.getElementById('Login');
var para2 = document.getElementById('Register');
if(winWidth < 480){
para.style.marginLeft = winWidth*0.20 + 'px';
para.style.marginRight = winWidth*0.20 + 'px';
para2.style.marginLeft = winWidth*0.20 + 'px';
para2.style.marginRight = winWidth*0.20 + 'px';
} else if(winWidth < 600){
para.style.marginLeft = winWidth*0.28 + 'px';
para.style.marginRight = winWidth*0.28 + 'px';
para2.style.marginLeft = winWidth*0.28 + 'px';
para2.style.marginRight = winWidth*0.28 + 'px';
} else if(winWidth < 840){
para.style.marginLeft = winWidth*0.34 + 'px';
para.style.marginRight = winWidth*0.34 + 'px';
para2.style.marginLeft = winWidth*0.34 + 'px';
para2.style.marginRight = winWidth*0.34 + 'px';
}
else{
para.style.marginLeft = winWidth*0.40 + 'px';
para.style.marginRight = winWidth*0.40 + 'px';
para2.style.marginLeft = winWidth*0.40 + 'px';
para2.style.marginRight = winWidth*0.40 + 'px';
}
}
respond();
對于輸入的信息，采用正則表達式來進行匹配庆锦。
var recNumber = /1[3|4|5|8|7][0-9]\d{8}/; //匹配手機號碼
var recPassword = /[a-zA-Z0-9]{8,16}/; //匹配密碼
var recName = /[a-zA-Z0-9]{6,16}/; //匹配昵稱
下面主要是注冊邏輯：
function nameIsCorrect() {
var event = document.getElementById('user');
var username = event.value;
if(username == ''){
event.classList.remove('normalInput','hintInput');
event.classList.add('warningInput');
return 0;
}
else if(!recName.test(username)) {
event.classList.remove('normalInput','hintInput');
event.classList.add('warningInput');
return 1;
}
/*else if(nameIsExistence(username)){
event.classList.remove('normalInput','hintInput');
event.classList.add('warningInput');
return 2;
}*/
else
return 3;
}
function passwordIsCorrect(password) {
if(recPassword.test(password))
return 1;
else{
if(password.length < 8)
return 3;
else
return 2;
}
}
//userName
document.getElementById('user').addEventListener('focus',function () {
this.classList.remove('warnInput','normalInput');
this.classList.add('hintInput');
document.getElementById('messageUser').style.display = 'block';
document.getElementById('correct').style.display = 'none';
document.getElementById('userHint').style.display = 'inline-block';
document.getElementById('userWarn').style.display = 'none';
});
document.getElementById('user').addEventListener('blur',function () {
document.getElementById('userHint').style.display = 'none';
document.getElementById('userWarn').style.display = 'none';
document.getElementById('messageUser').style.display = 'none';
document.getElementById('correct').style.display = 'none';
var index = nameIsCorrect(this.value);
if(index == 0){
document.getElementById('messageUser').style.display = 'block';
document.getElementById('userWarn').style.display = 'block';
document.getElementById('warnText').innerHTML = '用戶名不能為空';
}else if(index == 1){
document.getElementById('messageUser').style.display = 'block';
document.getElementById('userWarn').style.display = 'block';
document.getElementById('warnText').innerHTML = '用戶名格式錯誤';
}else if(index == 2){
document.getElementById('messageUser').style.display = 'block';
document.getElementById('userWarn').style.display = 'block';
document.getElementById('warnText').innerHTML = '用戶名已經(jīng)被占用';
}else if(index == 3){
document.getElementById('correct').style.display = 'inline-block';
this.classList.remove('hintInput','warnInput');
this.classList.add('normalInput');
}
});
//password
//passwordWarn1：密碼至少為8位
//passwordWarn2：密碼格式錯誤
//passwordWarn3：密碼不能為空
document.getElementById('password').addEventListener('focus',function () {
this.classList.remove('warnInput','normalInput');
this.classList.add('hintInput');
document.getElementById('messagePassword').style.display = 'block';
document.getElementById('passwordWarn1').style.display = 'none';
document.getElementById('passwordWarn2').style.display = 'none';
document.getElementById('passwordWarn3').style.display = 'none';
document.getElementById('passwordHint').style.display = 'block';
document.getElementById('passwordCorrect').style.display = 'none';
});
document.getElementById('password').addEventListener('blur',function () {
document.getElementById('passwordHint').style.display = 'none';
this.classList.remove('hintInput');
if(this.value === ''){
this.classList.add('warningInput');
document.getElementById('passwordCorrect').style.display = 'none';
document.getElementById('passwordWarn1').style.display = 'none';
document.getElementById('passwordWarn2').style.display = 'none';
document.getElementById('passwordWarn3').style.display = 'block';
} else{
var index = passwordIsCorrect(this.value);
if(index === 1){
document.getElementById('passwordCorrect').style.display = 'inline-block';
document.getElementById('passwordWarn1').style.display = 'none';
document.getElementById('passwordWarn2').style.display = 'none';
document.getElementById('passwordWarn3').style.display = 'none';
document.getElementById('messagePassword').style.display = 'none';
this.classList.add('normalInput');
} else if(index === 2){
document.getElementById('messagePassword').style.display = 'block';
document.getElementById('passwordCorrect').style.display = 'none';
document.getElementById('passwordWarn1').style.display = 'none';
document.getElementById('passwordWarn2').style.display = 'block';
document.getElementById('passwordWarn3').style.display = 'none';
this.classList.add('warningInput');
}else if(index === 3){
document.getElementById('messagePassword').style.display = 'block';
document.getElementById('passwordCorrect').style.display = 'none';
document.getElementById('passwordWarn1').style.display = 'block';
document.getElementById('passwordWarn2').style.display = 'block';
document.getElementById('passwordWarn3').style.display = 'none';
this.classList.add('warningInput');
}
}
});
//number
function numberIsExistence(number) {
if(number == '15723222479')
return true;
else
return false;
}
document.getElementById('number').addEventListener('focus',function () {
this.classList.remove('normalInput','warnInput');
this.classList.add('hintInput');
document.getElementById('messageNumber').style.display = 'none';
document.getElementById('securityCode').style.display = 'block';
});
document.getElementById('number').addEventListener('blur',function () {
this.classList.remove('hintInput');
if(this.value === ''){
this.classList.add('warningInput');
this.classList.remove('normalInput');
document.getElementById('numberCorrect').style.display = 'none';
document.getElementById('securityCode').style.display = 'none';
document.getElementById('messageNumber').style.display = 'block';
document.getElementById('numberWarn1').style.display = 'none';
document.getElementById('numberWarn2').style.display = 'none';
document.getElementById('numberWarn3').style.display = 'block';
} else{
if(recNumber.test(this.value)) {
if(numberIsExistence(this.value)) {
this.classList.add('warningInput');
this.classList.remove('normalInput');
document.getElementById('numberCorrect').style.display = 'none';
document.getElementById('securityCode').style.display = 'none';
document.getElementById('messageNumber').style.display = 'block';
document.getElementById('numberWarn1').style.display = 'block';
document.getElementById('numberWarn2').style.display = 'none';
document.getElementById('numberWarn3').style.display = 'none';
}
else {
this.classList.add('normalInput');
this.classList.remove('warningInput');
document.getElementById('messageNumber').style.display = 'none';
document.getElementById('numberCorrect').style.display = 'inline-block';
document.getElementById('securityCode').style.display = 'block';
document.getElementById('Register').removeAttribute('disabled');
}
}
else {
this.classList.add('warningInput');
this.classList.remove('normalInput');
document.getElementById('numberCorrect').style.display = 'none';
document.getElementById('securityCode').style.display = 'none';
document.getElementById('messageNumber').style.display = 'block';
document.getElementById('numberWarn3').style.display = 'none';
document.getElementById('numberWarn2').style.display = 'block';
document.getElementById('numberWarn1').style.display = 'none';
}
}
});
函數(shù)都是全局函數(shù)捅位，這是很不規(guī)范的行為，后面我會把它們封裝成對象的方法，避免全局變量混亂艇搀。
通過鼠標事件尿扯，輸入框獲取焦點時會提示對應輸入框的輸入要求，失去焦點后會立即判斷這個輸入框輸入的內(nèi)容是否正確焰雕。處理了注冊邏輯衷笋，登陸邏輯就比較簡單了。
效果如圖：
7255C1F9-62AB-4970-982D-5F5091BF1D5C.png
D82C92F2-5CF8-4D14-BF55-A47D975B9B9C.png
