标签：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script>
function checkEmail(){
//得到文本框的内容
var value = document.getElementById("email").value;
var rex = /^[a-zA-Z0-9]{3,20}@\w{2,10}[.](com|cn|net)$/;
var labelObj = document.getElementById("emailLabel");
if(rex.test(value) == true){
labelObj.innerHTML = "验证通过";
labelObj.style.color = "green";
return true;
}
else{
labelObj.innerHTML = "电子邮件格式为XX@XX.com";
labelObj.style.color = "red";
return false;
}
}
function checkName(){
var value = document.getElementById("userName").value;
var rex = /^[a-zA-Z\u4e00-\u9fa5]{2,20}$/;
var labelObj = document.getElementById("nameLabel");
if(rex.test(value) == true){
labelObj.innerHTML = "验证通过";
labelObj.style.color = "green";
return true;
}
else{
labelObj.innerHTML = "姓名必须为3-20字母或汉字";
labelObj.style.color = "red";
return false;
}
}
function checkBirthday(){
var value = document.getElementById("birthday").value;
var rex = /^(19|20)\d{2}-\d{2}-\d{2}$/;
var labelObj = document.getElementById("birthdayLabel");
if(rex.test(value) == true){
labelObj.innerHTML = "验证通过";
labelObj.style.color = "green";
return true;
}
else{
labelObj.innerHTML = "生日必须为XXXX-XX-XX";
labelObj.style.color = "red";
return false;
}
}
function checkPhone(){
var value = document.getElementById("phone").value;
var rex = /^1[358]\d{9}$/;
var labelObj = document.getElementById("phoneLabel");
if(rex.test(value) == true){
labelObj.innerHTML = "验证通过";
labelObj.style.color = "green";
return true;
}
else{
labelObj.innerHTML = "电话号码必须为13、15、18开始的11位数";
labelObj.style.color = "red";
return false;
}
}
function formCheck(){
return checkName()&&checkBirthday()&&checkPhone()&&checkEmail();
}
</script>
</head>
<body>
<form action="aaa" onsubmit="return formCheck()">
用户名：<input type="text" name="userName" id="userName" onblur="checkName()"/><label id="nameLabel"></label><br>
生日：<input type="text" name="birthday" id="birthday" onblur="checkBirthday()"/><label id="birthdayLabel"></label><br>
电话：<input type="text" name="phone" id="phone" onblur="checkPhone()"/><label id="phoneLabel"></label><br>
电子邮件：<input type="text" name="email" id="email" onblur="checkEmail()"><label id="emailLabel"></label><br>
<input type="submit" value="提交"/>
</form>
</body>
</html>标签：
原文地址：http://www.cnblogs.com/wangwei1234/p/4659389.html
