复制代码 代码如下:
<!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>
<script type="text/javascript">
function $(id) {
return document.getElementById(id);
}
function check() {
var email = $("email").value;
var password = $("password").value;
var repassword = $("repassword").value;
var name = $("name").value;
if(email == "") {
alert("Email值不能为空");
$("email").focus();
return false;
}
if(email.indexOf("@") == -1 || email.indexOf(".") == -1) {
alert("邮箱格式不正确,必须包含@和.");
$("email").focus();
return false;
}
if(password == "") {
alert("密码不能为空");
$("password").focus();
return false;
}
if(password.length < 6) {
alert("密码长度必须大于或者等于6");
$("password").focus();
return false;
}
if(repassword != password) {
alert("两次输入的密码不一致");
$("repassword").focus();
return false;
}
if(name == "") {
alert("姓名不能为空");
$("name").focus();
return false;
}
for(var i = 0; i < name.length; i++) {
var j = name.subString(i , i+1);
if(isNaN(j) == false) {
alert('姓名中不能包含数字');
$("name").focus();
return false;
}
}
}
</script>
</head>
<body>
<form method="post" onsubmit="return check()">
<div>
Email:<input type="text"/>
</div>
<div>
密码:<input type="password" />
</div>
<div>
重输密码:<input type="password" />
</div>
<div>
姓名：<input type="text" />
</div>
<div>
<input type="submit" value="注册" />
</div>
</form>
</body>
</html>
2. 输入框后面有提示信息的表单验证
复制代码 代码如下: