几种方法,仅供参考:
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);
function check() {
if(document.getElementById("username").value=="") {
alert("没有输入用户名!");
return false;
} else if(document.getElementById("password").value=="") {
alert("没有输入密码!");
return false;
} else {
return true;
}
}
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0" />
<body>
<form id="form1" action="" method="get">
<input name="text1" type="text" value="" placeholder="name">
<input type="password" name="pwd" placeholder="密码">
<input name="text3" value="submit" type="submit" onclick="subimtonclick()">
</form>
<script language="JavaScript">
function subimtonclick(){
var form1=document.getElementById('form1');
if(form1.text1.value==""){
alert("用户名不能为空");
form1.text1.focus();
return;
}
if(form1.text1.value.length<6 || form1.text1.value.length>10){
alert("用户名不能少于六个字符,不能超过十个字符");
form1.text1.focus();
return;
}
if(form1.pwd.value==""){
alert("密码不能为空");
form1.pwd.focus();
return;
}
if(form1.pwd.value.length<6 || form1.pwd.value.length>10){
alert("密码不能少于六个字符,不能超过十个字符");
form1.pwd.focus();
return;
}
var str="用户名:"+form1.text1.value+"<br>"+
"密码:"+form1.pwd.value+"<br>";
document.writeln(str);
}
</script>
</body>
</html>