<!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" οnsubmit="return checkCode()+checkPwd()==2"> <p> 账号：<input type="text" id="code" οnblur="checkCode();"> <span id="code_msg">5-10位字母，数字，下划线</span> </p> <p>密码：<input type="password" id="pwd" οnblur="checkPwd()"> <span id=pwd_msg>10-20位字母，数字，下划线</span> </p> <p> <input type="submit" value="登陆"> </p> </form></body></html>