<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.ok{color: green;}
.error{color: red;}
</style>
<script type="text/javascript">
//驗證賬號的格式
function checkCode() {
var code=document.getElementById("code").value;
//獲取span
var span=document.getElementById("code_msg");
//判斷賬號格式
var reg=/^\w{5,10}$/;
if(reg.test(code)){
//格式對了變綠
span.className="ok";
return true;
}else{
//格式錯了變紅
span.className="error";
return false;
}
}
function checkPwd() {
var pwd=document.getElementById("pwd").value;
var span=document.getElementById("pwd_msg");
var reg=/^\w{5,10}$/;
if(reg.test(pwd)){
span.className="ok";
return true;
}else{
span.className="error";
return false;
}
}
</script>
</head>
<body>
<form action="http://www.baidu.com" onsubmit="return checkCode()+checkPwd()==2">
<p>
賬號：<input type="text" id="code" onblur="checkCode();"> <span id="code_msg">5-10位字母，數字，下划線</span>
</p>
<p>密碼：<input type="password" id="pwd" onblur="checkPwd()"> <span id=pwd_msg>10-20位字母，數字，下划線</span>
</p>
<p>
<input type="submit" value="登陸">
</p>
</form>
</body>
</html>