JavaScript表单提交验证（顺便仿了下阿里云注册界面）
长这样（看不清的话就右键：在新标签中打开图片）
也可以点击跳转我做的这个网页
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
html{
height: 100%;
}
body{
margin: 0px;
height: 100%;
}
#div1{
height: 77%;
background-color: whitesmoke;
}
#div1 h1{
float: left;
margin: 10px;
}
#div1 span{
float: right;
margin: 20px;
}
#div1_1{
background-color: white;
width: 50%;
height: 70%;
margin: 0 auto;
margin-top: 5%;
position: relative;
}
#div2{
height: 27%;
background-color: #373d41;
}
form{
width: 35%;
margin: 0 auto;
height: 80%;
}
form input{
height: 8%;
width: 100%;
margin-bottom: 5%;
}
#sumbitInput{
height: 10%;
margin-top: 10%;
background-color: royalblue;
border: 0px;
color: white;
}
input[type=date]::-webkit-inner-spin-button { visibility: hidden; }
.spanColor{
color: red;
}
#div2_2{
width: 70%;
margin: 0 auto;
margin-top: 1%;
}
#div2_2 a{
color: gainsboro;
text-decoration: none;
margin-right: 2%;
}
</style>
<script type="text/javascript">
//效验用户名
function checkName(){
var username=document.getElementById("username").value;
var regex = new RegExp("^\\w{6,20}$");
if(regex.test(username)){
document.getElementById("username").style.border="1px solid blue";
document.getElementById("usernameMes").innerText="";
return true;
}else{
document.getElementById("username").style.border="1px solid red";
document.getElementById("usernameMes").innerText=" 您输入的用户名格式不正确";
return false;
}
}
//效验密码
function checkPassWord(){
checkPassWord2();
var password=document.getElementById("password").value;
var regex = new RegExp("^\\w{6,10}$");
if(regex.test(password)){
document.getElementById("password").style.border="1px solid blue";
document.getElementById("passwordMes").innerText="";
return true;
}else{
document.getElementById("password").style.border="1px solid red";
document.getElementById("passwordMes").innerText=" 您输入的密码格式不正确";
return false;
}
}
//效验确认密码
function checkPassWord2(){
var password=document.getElementById("password").value;
var password2=document.getElementById("password2").value;
if(password2==password){
document.getElementById("password2").style.border="1px solid blue";
document.getElementById("passwordMes2").innerText="";
return true;
}else{
document.getElementById("password2").style.border="1px solid red";
document.getElementById("passwordMes2").innerText=" 您输入的密码不相同";
return false;
}
}
//效验出生日期
function checkBirthday(){
var birthday=document.getElementById("birthday").value;
date1 = new Date(birthday);//获取input标签输入的时间
date2 = new Date();//获取当前时间
if(date2.getFullYear()-date1.getFullYear()>=18){
if(date2.getFullYear()-date1.getFullYear()==18){
if(date2.getMonth()-date1.getMonth()>0){
document.getElementById("birthday").style.border="1px solid blue";
document.getElementById("birthdayMes").innerText="";
return true;
}else if(date2.getMonth()-date1.getMonth()==0){
if(date2.getDate()-date1.getDate()>=0){
document.getElementById("birthday").style.border="1px solid blue";
document.getElementById("birthdayMes").innerText="";
return true;
}
}
}else{
document.getElementById("birthday").style.border="1px solid blue";
document.getElementById("birthdayMes").innerText="";
return true;
}
}
document.getElementById("birthday").style.border="1px solid red";
document.getElementById("birthdayMes").innerText=" 未满十八禁止进站";
return false;
}
//判断是否提交表单
function checkAll(){
if(checkName() && checkPassWord() && checkPassWord2() && checkBirthday()){
return true;
}else{
alert("有填写错误的项");
return false;
}
}
</script>
</head>
<body>
<div id="div1">
<div style="border: 1xp solid black; height: 9%;">
<h1>首页</h1>
<span>关于</span>
<span>首页</span>
</div>
<div style="clear: both;"></div>
<hr style="margin: 0px;" />
<div id="div1_1">
<p align="center" style="font-size: 2em; padding-top: 3%;">欢迎注册妙妙屋</p>
<form method="get" action="../test/test1.html" onsubmit="return checkAll()">
<input
placeholder="设置会员名 : 6-20位字母或数字组成"
id="username"
name="username"
onblur="checkName()"
onfocus=""
require
/>
<input
placeholder="设置密码 : 6-10位字母或数字组成"
id="password"
name="password"
required
onblur="checkPassWord()"
onfocus=""
require
/>
<input
placeholder="确认密码"
id="password2"
name="password2"
required
onblur="checkPassWord2()"
onfocus=""
require
/>
<input
type="date"
id="birthday"
name="birthday"
required
onblur="checkBirthday()"
onfocus=""
require
/>
<input id="sumbitInput" type="submit" value="同意霸王条款并注册"/>
</form>
<div style="position: absolute; top:8%; left: 80%; font-size: 0.7em; color: darkgray;">想要一刀99999？</div>
<a href="#" style="text-decoration: none; position: absolute; top:8%; left: 90%; font-size: 0.7em; color: royalblue;">就来贪玩蓝月 ></a>
<div id="usernameMes" class="spanColor" style="position: absolute; top:21%; left: 75%;"></div>
<div id="passwordMes" class="spanColor" style="position: absolute; top:31%; left: 75%;"></div>
<div id="passwordMes2" class="spanColor" style="position: absolute; top:41%; left: 75%;"></div>
<div id="birthdayMes" class="spanColor" style="position: absolute; top:51%; left: 75%;"></div>
</div>
</div>
<div id="div2">
<div style="border-bottom: 1px solid gainsboro; width: 70%; padding-top: 2%; margin: 0 auto;"></div>
<div id="div2_2">
<a href="#">关于我们</a>
<a href="#">法律声明及隐私权政策</a>
<a href="#">廉正举报</a>
<a href="#">联系我们</a>
<a href="#">加入妙妙屋</a>
</div>
</div>
</body>
</html>
