<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<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;
var phone = $("phone").value;
$("emailinfo").innerHTML = "";
$("passwordinfo").innerHTML = "";
$("repasswordinfo").innerHTML = "";
$("nameinfo").innerHTML = "";
$("phoneinfo").innerHTML = "";
//邮箱验证
if(email == "") {
$("emailinfo").innerHTML = "Email值不能为空";
return false;
}
if(email.search(/^/\D/g/) == -1) {
$("emailinfo").innerHTML = "邮箱格式不正确";
return false;
}
//密码验证
if(password == "") {
$("passwordinfo").innerHTML = "密码不能为空";
return false;
}
if(password.length < 6) {
$("passwordinfo").innerHTML = "密码长度必须大于或者等于6";
return false;
}
//确认密码验证
if(repassword != password) {
$("repasswordinfo").innerHTML = "两次输入的密码不一致";
return false;
}
//姓名验证
if(name == "") {
$("nameinfo").innerHTML = "姓名不能为空";
return false;
}
if (name.search(/^(?=.*\d.*\b)/) != -1){
$("errorinfo").innerHTML = "姓名不能有数字";
return false;
}
//手机号验证
if(phone == ""){
$("phoneinfo").innerHTML = "手机号不能为空";
return false;
}
if (phone.search(/^(13[0-9]|15[012356789]|17[0-9]|18[0-9]|14[57])[0-9]{8}$/) == -1){
$("phoneinfo").innerHTML = "手机号格式错误";
return false;
}
}
</script>
</head>
<body>
<form name="login_form" method="post">
<div>
Email:<input type="text" name="email" id="email"/>
<span id="emailinfo"></span>
</div>
<div>
密码:<input type="password" name="password" id="password"/>
<span id="passwordinfo"></span>
</div>
<div>
重输密码:<input type="password" name="repassword" id="repassword"/>
<span id="repasswordinfo"></span>
</div>
<div>
姓名：<input type="text" name="name" id="name"/>
<span id="nameinfo"></span>
</div>
<div>
手机号：<input type="text" name="phone" id="phone"/>
<span id="phoneinfo"></span>
</div>
<div>
<button type="button" onclick="return check()"/>注册</button>
</div>
</form>
</body>
</html>
