<!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>
js_表单登陆 reg.test(str)
原文地址：http://www.cnblogs.com/Bighua123/p/7631650.html