<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
//检查用户名是否正确
function checkName() {
//获取到输入框的颜色为白色
document.getElementById("username").style.backgroundColor = "white";
//获取到value值，并去空格，有变量接收
var username = document.getElementById("username").value.trim();
//定义正则，用户名为6-20位数字或字母
var regex = new RegExp("^\\w{6,20}$");
//判断用户输入的是否正确
if(regex.test(username)) {
//用户输入正确就不用提示，并返回true;
document.getElementById("usernameMsg").innerText = "";
return true;
} else {
//输入错误给出提示，并返回false
document.getElementById("usernameMsg").innerText = "用户名格式不正确";
return false;
}
}
//检查密码方法
function checkPWD() {
//离开时背景颜色为白色
document.getElementById("pass").style.backgroundColor = "white";
//alert("aa")
//获得用户输入值
var pwd = document.getElementById("pass").value.trim();
//定义正则
var regex = new RegExp("^\\d{6,8}$");
//判断正则是否正确
if(regex.test(pwd)) {
//正确返回true
document.getElementById("passwordMsg").innerText = "";
return true;
} else {
document.getElementById("passwordMsg").innerText = "密码格式不正确";
return false;
}
}
/*确认密码*/
function checkrep() {
document.getElementById("repass").style.backgroundColor = "white";
var repass = document.getElementById("repass").value.trim();
var pwd = document.getElementById("pass").value.trim();
if(repass == pwd) {
document.getElementById("passMsg").innerText = "";
return true;
} else {
document.getElementById("passMsg").innerText = "密码两次输入不一样";
return false;
}
}
//当用户点击正在输入框时，背景有变化(聚焦事件)
function showColor(ele) {
ele.style.backgroundColor = "lavenderblush ";
}
function checkBirth() {
/*获取到用户输入的日期并转成Date()类，并取得年、月、日*/
var da = document.getElementById("birth").value;
var hirthDate = new Date(da);
hirYear = hirthDate.getFullYear()
hirMonth = hirthDate.getMonth();
hirDay = hirthDate.getDate();
/*获取到当前日期，并取得年月日*/
var nowDate = new Date();
nowYear = nowDate.getFullYear();
nowMonth = nowDate.getMonth();
nowDay = nowDate.getDate();
//alert(nowYear-hirYear);
if(nowYear - hirYear >= 12) {
if(nowYear - hirYear == 12) {
if(nowMonth - hirMonth >= 0) {
if(nowDay - hirDay >= 0) {
document.getElementById("birthInfo").innerText = "";
return true;
} else {
document.getElementById("birthInfo").innerText = "未满12岁禁止注册";
return false;
}
document.getElementById("birthInfo").innerText = "";
return true;
} else {
document.getElementById("birthInfo").innerText = "未满12岁禁止注册";
return false;
}
} else {
document.getElementById("birthInfo").innerText = "未满12岁禁止注册";
return false;
}
}
document.getElementById("birthInfo").innerText = "未满12岁禁止注册";
return false;
}
/*定义方法，校验邮箱是否正确*/
function checkEmail() {
document.getElementById("email").style.backgroundColor = "white";
var email = document.getElementById("email").value.trim();
var regx = RegExp(/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/);
if(regx.test(email)) {
document.getElementById("emailInfo").innerText = "";
return true;
} else {
document.getElementById("emailInfo").innerText = "邮箱格式不正确";
return false;
}
}
/*定义方法，当所有校验都返回true后才能提交表单*/
function checkForm() {
if(checkName() && checkPWD() && checkrep() && checkBirth()) {
return true;
} else {
return false;
}
}
</script>
<style>
.err {
color: red;
}
#div1 {
text-align: center;
}
#div2 {
margin: 0 auto;
width: 800px;
height: 600px;
border: 1px;
position: relative;
background-color: ivory;
}
#username,
#pass,
#repass,
#birth,
#email {
width: 200px;
margin: 0px;
padding: 0px;
}
.in {
height: 20px;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">
<h2>用 户 注 册</h2><br />
<form method="post" action="suc.html" onsubmit=" return checkForm()">
<!--用户名-->
<p> 用户名：<input class="in" name="username" required placeholder="6-20位数字或字母" id="username" onfocus="showColor(this)" onblur="checkName()" />
</p>
<!--密码-->
<p> 密 码：<input class="in" id="pass" type="password" name="username" required onblur="checkPWD()" onfocus="showColor(this)" placeholder="请输入密码" />
</p>
<!--确认密码-->
<p>确认密码：<input type="password" class="in" id="repass" name="repassword" required onblur="checkrep()" onfocus="showColor(this)" placeholder="请确认密码" /> </p>
<!--选择出生日期-->
<p> 出生日期：<input type="date" class="in" id="birth" onblur="checkBirth()" />
</p>
<!--邮箱-->
<p> 邮 箱：<input class="in" id="email" onfocus="showColor(this)" onblur="checkEmail()" placeholder="请输入邮箱地址" />
</p>
<!--注册按钮-->
<p><input type="submit" value="注册" /></p>
</form>
<span id="usernameMsg" class="err" style="position: absolute; top: 15%; left: 80%; font-size: 15px;"></span>
<span id="passwordMsg" class="err" style="position: absolute; top: 21%; left: 80%; font-size: 15px;"></span>
<span id="passMsg" class="err" style="position: absolute; top: 28%; left: 80%; font-size: 15px;"></span>
<span id="birthInfo" class="err" style="position: absolute; top: 35%; left: 80%; font-size: 15px;"></span>
<span id="emailInfo" class="err" style="position: absolute; top: 42%; left: 80%; font-size: 15px;"></span>
</div>
</div>
</body>
</html>
javascript写一个简单的表单校验
猜你喜欢
转载自blog.csdn.net/lzpzwy/article/details/80072776
今日推荐
周排行