<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>js02.html</title>
<script type="text/javascript">
function checkName(){
//1. 获取文本框的值
var name=document.getElementById("name").value;
//2. 验证格式是否合法
//3. 根据不同的验证结果 提示不同的信息
var span=document.getElementById("name_msg");
//使用正则表达式验证
var exp=/^\w{8,15}$/;
if(exp.test(name)){
//合格
span.style.color="green";
span.innerHTML="格式正确";
return true;
}else{
//不合格
span.style.color="red";
span.innerHTML="格式错误(单词字符[8,15])";
return false;
}
}
function checkPwd(){
//1. 获取文本框的值
var pwd=document.getElementById("pwd").value;
//2. 验证格式是否合法
//3. 根据不同的验证结果 提示不同的信息
var span=document.getElementById("pwd_msg");
var exp=/^\d{6}$/;
if(exp.test(pwd)){
//合格
span.style.color="green";
span.innerHTML="格式正确";
return true;
}else{
//不合格
span.style.color="red";
span.innerHTML="格式错误(6位数字)";
return false;
}
}
function checkForm(){
return checkName() && checkPwd();
}
</script>
</head>
<body>
<h1>登录</h1>
<form action="login.do" onsubmit="return checkForm();">
账号:<input onblur="checkName()" type="text" id="name" />
<span id="name_msg"></span>
<br/><br/>
密码:<input onblur="checkPwd()" type="password" id="pwd"/>
<span id="pwd_msg"></span>
<br/><br/>
<input type="submit" value="登录"/>
</form>
</body>
</html>
简单登录
最新推荐文章于 2024-03-26 10:01:46 发布