簡單清晰明了版本
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script type="text/javascript"> function check() { if(document.getElementById("username").value=="") { alert("沒有輸入用戶名！"); return false; } else if(document.getElementById("password").value=="") { alert("沒有輸入密碼！"); return false; } else { alert("提交成功！") return true; } } </script> <form name="form1"> <input type="text" id="username"> <input type="password" id="password" > <input type="submit" onclick="check()"> </form> </body> </html>
以下是牛客網 魯魯寫的代碼，很好 ，向他學習
鏈接：https://www.nowcoder.com/questionTerminal/f904c482f21346a6a19efd5a82655518
來源：牛客網
var getCheckObject = function() {
var tipP = tip = document.createElement("p");
tip.appendChild(document.createTextNode("密碼錯誤"));
var tipU = tip = document.createElement("p");
tip.appendChild(document.createTextNode("用戶名錯誤"));
function addErrorTip(node, type) {
node.className +=' ' + 'error' +' ';
if(type =="username") {
node.parentNode.appendChild(tipU);
} else if (type == "password") {
node.parentNode.appendChild(tipP);
}
}
function removeErrorTip(node, type) {
node.className = "";
if(type ==="username") {
node.parentNode.removeChild(tipU);
} else if (type === "password") {
node.parentNode.removeChild(tipP);
}
}
function isValidName(name) {
return false;
}
function isValidPassword(password) {
var lenIsEnough = password.length > 6; //密碼長度大於6
var hasDigital = /{d}+/.test(password); //密碼包含數字
var hasCharater = /{w}+/.test(password); //密碼包含其它字符
return lenIsEnough && hasDigital && hasCharater;
}
return {
addErrorTip: addErrorTip,
removeErrorTip: removeErrorTip,
isValidName: isValidName,
isValidPassword: isValidPassword
};
};
var checkObj = getCheckObject();
var form = document.forms['login-form'];
var username = form['username'];//--name是關鍵字
var password = form['password'];
form.addEventListener('submit', function(event){
if(!checkObj.isValidName(username.value)) {
checkObj.addErrorTip(username,'username');
event.preventDefault();
}
if(!checkObj.isValidPassword(password.value)) {
checkObj.addErrorTip(password,'password');
event.preventDefault();
}
}, false);
form.addEventListener('reset',function(event){
checkObj.removeErrorTip(username,'username');
checkObj.removeErrorTip(password,'password');
},false);
username.addEventListener('blur', function(event) {
if (!checkObj.isValidName(username.value)) {
checkObj.addErrorTip(username, 'username');
}
}, false)
username.addEventListener('focus', function(event) {
checkObj.removeErrorTip(username, 'username');
}, false);
password.addEventListener('blur', function(event) {
if (!checkObj.isValidPassword(password.value)) {
checkObj.addErrorTip(password, 'password');
}
}, false)
password.addEventListener('focus', function(event) {
checkObj.removeErrorTip(password, 'password');
}, false);