<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表单验证</title>
</head>
<style type="text/css">
body{
color:#006;
font-size:12px;
}
form input{
height:15px;
width:150px;
}
form p span{
font-size:12px;
color:#F60;
margin-left:10px;
display:none;
border:#F30 solid 2px;
padding:2px;
}
</style>
<script type="text/javascript">
function checkForm(){
var name = document.getElementById("name").value;
var pwd = document.getElementById("pwd").value;
var age = document.getElementById("age").value;
var mail = document.getElementById("mail").value;
var flag = true;
if(name.length <= 0 ){
document.getElementById("nameError").innerHTML = "用户名不能为空";
document.getElementById("nameError").style.display = "inline";
document.getElementById("name").focus();
flag = false;
}
if(pwd.length <= 0 ){
document.getElementById("pwdError").innerHTML = "密码不能为空";
document.getElementById("pwdError").style.display = "inline";
document.getElementById("pwd").focus();
flag = false;
}
if(age.length <= 0 ){
document.getElementById("ageError").innerHTML = "年龄不能为空";
document.getElementById("ageError").style.display = "inline";
document.getElementById("age").focus();
flag = false;
}else{
if(isNaN(age)){
document.getElementById("ageError").innerHTML = "年龄不能为数字";
document.getElementById("ageError").style.display = "inline";
flag = false;
}
}
if(mail.length <= 0 ){
document.getElementById("mailError").innerHTML = "邮箱不能为空";
document.getElementById("mailError").style.display = "inline";
document.getElementById("mail").focus();
flag = false;
}else{
var atIndex = mail.indexOf('@');
var doIndex = mail.indexOf('.');
if (atIndex<1||doIndex-atIndex<2){
document.getElementById("mailError").innerHTML = "邮箱格式不正确";
document.getElementById("mailError").style.display = "inline";
flag = false;
}
}
if(flag){
document.forms[0].submit();
}
}
function onFocus(){
document.getElementById("name").focus();
}
function selectAll(e){
e.select();
}
function hideError(id){
document.getElementById(id).style.display = "none";
}
</script>
<body οnlοad="onFocus()">
<form action="index.jsp" method="post">
<p>
用户名:<input type="text" value="" id="name" οnkeydοwn="hideError('nameError')" οnmοuseοver="selectAll(this)"/>
<span id="nameError"></span>
</p>
<p>
密 码:<input type="password" value="" id="pwd" οnkeydοwn="hideError('pwdError')" οnmοuseοver="selectAll(this)"/>
<span id="pwdError"></span>
</p>
<p>
年 龄:<input type="text" value="" id="age" οnkeydοwn="hideError('ageError')" οnmοuseοver="selectAll(this)"/>
<span id="ageError"></span>
</p>
<p>
邮 箱:<input type="text" value="" id="mail" οnkeydοwn="hideError('mailError')" οnmοuseοver="selectAll(this)"/>
<span id="mailError"></span>
</p>
<p><img src="login.gif" width="72" height="31" style="cursor:pointer;" οnclick="checkForm()"/></p>
</form>
</body>
</html>