<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
html{
background-color: beige;/*设置页面背景色 */
}
#zuida{
32%;
height: 400px; /*设置宽高 */
border: 0px solid red;
margin: auto; /* 居中 */
}
.a{
30%;
height: 30px; /*设置宽高*/
}
.input{
60%;
height: 30px; /* 设置宽高*/
margin: 4px 0px 4px 80px; /*外边距:上右下左*/
}
input{
text-align: center; /*文字居中*/
}
font{
margin-left: 80px; /*外左边距*/
}
input[type='checkbox']{
margin-left: 80px; /*外左边距 */
}
#span{
margin-left: 0px;
}
.color{
color: red; /*设置颜色*/
}
.color1{
color: black;
}
</style>
<script type="text/javascript">
//获取所有函数，当所有函数满足条件时，表单提交，若任意一个不满足，则阻止表单提交
function zh(){
var a=youxiang();
var b=mima();
var c=zaici();
var d=panduan();
var e=xuankuang();
return a&&b&&c&&d&&e;
}
//验证邮箱
function youxiang(){
var yx=document.getElementById('yx').value; //获取input里的value值
var one=document.getElementById('one'); //获取font的id值
var reg=/^w+((-w+)|(.w+))*@[A-Za-z0-9]+((.|-)[A-Za-z0-9]+)*.[A-Za-z0-9]+$/;//正则验证邮箱
if(yx==''){
one.innerHTML='邮箱输入为空';//若为空，则在font标签里输入这段字
one.className='color'; //变换便签样式（颜色）
return false;
}
if (reg.test(yx)) {
one.innerHTML='邮箱输入正确';
one.className='color1';
return true;
} else{
one.innerHTML='邮箱输入错误';
one.className='color';
return false;
}
}
//验证密码
function mima(){
var yx=document.getElementById('mm').value;
var one=document.getElementById('two');
var reg=/^d{6,10}$/; //用正则表示密码位数在6-10位之间任意数字
if(yx==''){
one.innerHTML='密码输入为空';
one.className='color';
return false;
}
if (reg.test(yx)) {
one.innerHTML='密码输入正确';
one.className='color1';
return true;
} else{
one.innerHTML='密码输入错误';
one.className='color';
return false;
}
}
//验证再次输入密码
function zaici(){
var yx=document.getElementById('mm').value;
var zaci=document.getElementById('zaci').value;
var one=document.getElementById('three');
if (zaci==yx && zaci!='') { //密码与第一次一致，并且不为空时
one.innerHTML='密码一致';
one.className='color1';
return true;
} else{
one.innerHTML='密码不一致';
one.className='color';
return false;
}
}
//获取验证码
function yanzm(){
a=""; //先定义一个空值
var b=new Array(); //定义一个空数组
for (var i=0; i<4;i++){ //令每次输出数字长度为4（代表下标为0-3）
b[i]=Math.round(Math.random()*9);//var 变量名=Math.floor(Math.random()*(y+1-x)+x)表示随机数，每次随机数都存入数组
a+=b[i]; //用a来转接
}
document.getElementById("yzm").value=a;//将随机数字放入ID为yzm的标签中
}
//判断验证码是否与随机的一致
function panduan(){
var yz=document.getElementById('yz').value;
var yzm=document.getElementById('yzm').value;
var one=document.getElementById('four');
if (yzm==yz) {
one.innerHTML='验证码正确';
return true;
} else{
one.innerHTML='验证码错误';
return false;
}
}
//判断单选框是否被选中
function xuankuang(){
var xk=document.getElementById('xk');
if (xk.checked==true) {//当单选框被选中时，返回true，否则，返回false
return true;
} else{
return false;
}
}
</script>
</head>
<body>
<center><h2>网易邮箱注册</h2></center>
<!--当所有input都满足条件时，跳转到js/chengong.html网页，绑定提交事件 -->
<form action="js/chengong.html" onsubmit="return zh()">
<div id="zuida">
<input type="text" placeholder="请输入邮箱" id="yx" onblur="youxiang()" class="input"/><br /><!--绑定失去焦点事件-->
<font id="one" size="2"></font><br />
<input type="password" placeholder="请输入密码" id="mm" onblur="mima()" class="input"/><br /><!--绑定失去焦点事件-->
<font id="two" size="2"></font><br />
<input type="password" placeholder="请再次确认密码" id="zaci" onblur="zaici()" class="input"/><br /><!--绑定失去焦点事件-->
<font id="three" size="2"></font><br />
<center>
<input type="text" placeholder="请输入验证码" id="yz" class="a" onblur="panduan()"/><!--绑定失去焦点事件-->
<input type="button" value="获取验证码" id="yzm" class="a" onclick="yanzm()" style=""/><br /><!--绑定点击事件-->
</center>
<font id="four" size="2"></font><br />
<input type="checkbox" id="xk"/><font size="2" id="span">我已阅读并同意相关协议</font><br />
<input type="submit" value="注册" style="" class="input"/>
</div>
</form>
</body>
</html>