<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;font-family: "微软雅黑";}
.conter{
width: 800px;
margin: auto;
}
.conter p{
font-size: 25px;
font-family: "微软雅黑";
color: #398439;
font-weight: bold;
}
.conter input{
width: 500px;
height: 50px;
margin: 10px;
padding-left: 10px;
font-size: 14px;
font-family: "微软雅黑";
outline: none;
border-radius: 3px;
border: 1px solid #CCCCCC;
}
#submit{
background-color: #66AFE9;
font-size: 22px;
font-weight: bold;
color: #EEEEEE;
width: 511px;
height: 50px;
}
#submit:hover{
background-color: #2B669A;
}
.nicknameTips{
display: none;
}
.nicknameTips img{
margin-right: 6px;
margin-left: 10px;
}
.nicknameTips span{
font-size: 14px;
}
.passwordTips{
display: none;
}
.passwordTips img{
margin-right: 6px;
margin-left: 10px;
}
.passwordTips span{
font-size: 14px;
}
.upasswordTips{
display: none;
}
.upasswordTips img{
margin-right: 6px;
margin-left: 10px;
}
.upasswordTips span{
font-size: 14px;
}
.phoneTips{
display: none;
}
.phoneTips img{
margin-right: 6px;
margin-left: 10px;
}
.phoneTips span{
font-size: 14px;
}
.title{
margin-right: 6px;
margin-left: 10px;
font-size: 14px;
color: #000000;
}
</style>
</head>
<body>
<div class="conter">
<p>QQ注册</p>
<form action="模态框.html" οnsubmit="return checkSubmit()">
<div>
<input type="text" placeholder="昵称" id="nickname"/>
<div class="nicknameTips" id="nicknameTips">
<div>
<img src="img/error.png" align="center" /><span>昵称不能为空</span>
</div>
</div>
</div>
<div>
<input type="password" placeholder="密码" id="password"/>
<div class="passwordTips" id="passwordTips">
<div>
<img id="space" src="img/green.png" align="center"/><span>不能包含空格</span>
</div>
<div>
<img id="length" src="img/info.png" align="center" /><span>长度在8~16之间</span>
</div>
<div>
<img id="content" src="img/info.png" align="center" /><span>必须包含数字、字母、符号中的其中两个</span>
</div>
</div>
</div>
<div>
<input type="password" placeholder="确认密码" id="upassword"/>
<div class="upasswordTips" id="upasswordTips">
<div>
<img src="img/error.png" align="center" /><span>两次输入的密码不相同</span>
</div>
</div>
</div>
<div>
<input type="text" placeholder="手机号码" id="phone"/>
<div class="phoneTips" id="phoneTips">
<div>
<img id="phoneImg" src="img/error.png" align="center" /><span>长度为11位的有效手机号码</span>
</div>
</div>
</div>
<div>
<input type="submit" id="submit" value="立即注册"/>
</div>
<div>
<img src="img/checkbox_check.png" id="checkbox" align="center" checked="true" /><span class="title" id="tit">我已阅读并同意相关规定和隐私协议</span>
</div>
</form>
</div>
<script>
window.οnlοad=function(){
//给多选框img定义点击事件
var checkbox=document.getElementById("checkbox");
checkbox.οnclick=function(){
//获取图片中的自定义属性的
var checked=this.getAttribute("checked");
if (checked=="true") {
this.src="img/checkbox_normal.png";
this.setAttribute("checked","false");
document.getElementById("tit").style.color="#000000";
} else{
this.src="img/checkbox_check.png";
this.setAttribute("checked","true");
document.getElementById("tit").style.color="#9D9D9D";
}
}
//给昵称注册获取焦点事件
var nickname=document.getElementById("nickname");
nickname.οnfοcus=function(){
this.style.borderColor="#6495ED";
document.getElementById("nicknameTips").style.display="none";
}
//给昵称注册失去焦点事件
nickname.οnblur=nicknamecheck;
//给密码注册获取焦点事件
var password=document.getElementById("password");
password.οnfοcus=function(){
this.style.borderColor="#6495ED";
document.getElementById("passwordTips").style.display="block";
}
//给密码注册失去焦点事件
password.οnblur=function(){
//调用验证密码的方法
var result=checkpassword();
if (result==true) {
this.style.borderColor="green";
document.getElementById("passwordTips").style.display="none";
} else{
this.style.borderColor="red";
}
}
//给确认密码注册获得焦点事件
var upassword=document.getElementById("upassword");
upassword.οnfοcus=function(){
this.style.borderColor="#6495ED";
document.getElementById("upasswordTips").style.display="none";
}
//给确认密码注册失去焦点事件
upassword.οnblur=upasswordcheck;
//给手机注册获得焦点事件
var phone=document.getElementById("phone");
phone.οnfοcus=function(){
this.style.borderColor="#6495ED";
document.getElementById("phoneTips").style.display="none";
}
//给手机注册失去焦点事件
phone.οnblur=function(){
var result=checkphone();
if (result==true) {
this.style.borderColor="green";
document.getElementById("phoneTips").style.display="none";
} else{
this.style.borderColor="red";
document.getElementById("phoneTips").style.display="block";
}
}
}
//检测用户名是否合法的函数
function nicknamecheck(){
var value=document.getElementById("nickname").value;
if (value=="") {
document.getElementById("nickname").style.borderColor="red";
document.getElementById("nicknameTips").style.display="block";
return false;
} else{
document.getElementById("nickname").style.borderColor="green";
document.getElementById("nicknameTips").style.display="none";
return true;
}
}
//检测确认密码与密码是否相同的函数
function upasswordcheck(){
var pwdv=document.getElementById("password").value;
var upwdv=document.getElementById("upassword").value;
if (pwdv==upwdv) {
document.getElementById("upassword").style.borderColor="green";
document.getElementById("upasswordTips").style.display="none";
return true;
} else{
document.getElementById("upassword").style.borderColor="red";
document.getElementById("upasswordTips").style.display="block";
return false;
}
}
//密码框输入内容发生改变时 触发的函数,有任何一个条件不满足则返回false,如果所有的条件都满足返回true
function checkpassword(){
var password=document.getElementById("password");
var b=true;
var value=password.value;
//使用正则表达式判断密码的合法性
var numReg = /[0-9]{1,}/;
var lettReg = /[a-zA-Z]{1,}/;
var codeReg = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>/?~!@#¥……&*()——|{}【】‘;:”“'。,、?]");
var spaceReg = /\s{1,}/;
if (spaceReg.test(value)) {
document.getElementById("space").src="img/info.png";
b=false;
} else{
document.getElementById("space").src="img/green.png";
}
if (value.length>=8&&value.length<=16) {
document.getElementById("length").src="img/green.png";
} else{
document.getElementById("length").src="img/info.png";
b=false;
}
//判断密码的内容必须满足至少两个正则表达式
if (numReg.test(value)&&lettReg.test(value)) {
document.getElementById("content").src="img/green.png";
} else if(numReg.test(value)&&codeReg.test(value)){
document.getElementById("content").src="img/green.png";
}else if(lettReg.test(value)&&codeReg.test(value)){
document.getElementById("content").src="img/green.png";
}else{
document.getElementById("content").src="img/info.png";
b=false;
}
return b;
}
//手机号码输入框的内容发生改变时,判断手机号码是否合法的函数,返回判断结果
function checkphone(){
var value=document.getElementById("phone").value;
var phoneReg=/1[3,4,5,7,8]\d{9}/;
if (phoneReg.test(value)&&value.length==11) {
document.getElementById("phoneImg").src="img/green.png";
return true;
} else{
document.getElementById("phoneImg").src="img/error.png";
return false;
}
}
//定义提交表单时提交的事件
function checkSubmit(){
var nicknamecheckSub=nicknamecheck();
var checkpasswordSub=checkpassword();
var checkphoneSub=checkphone();
var upasswordcheckSub=upasswordcheck();
var checkCheckBoxResult=document.getElementById("checkbox").getAttribute("checked");
alert(checkCheckBoxResult);
if (checkCheckBoxResult=="false") {
alert("请阅读服务协议并同意");
return false;
} else{
if (nicknamecheckSub==true&&checkpasswordSub==true&&checkphoneSub==true&&upasswordcheckSub==true) {
return true;
} else{
return false;
}
}
}
</script>
</body>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;font-family: "微软雅黑";}
.conter{
width: 800px;
margin: auto;
}
.conter p{
font-size: 25px;
font-family: "微软雅黑";
color: #398439;
font-weight: bold;
}
.conter input{
width: 500px;
height: 50px;
margin: 10px;
padding-left: 10px;
font-size: 14px;
font-family: "微软雅黑";
outline: none;
border-radius: 3px;
border: 1px solid #CCCCCC;
}
#submit{
background-color: #66AFE9;
font-size: 22px;
font-weight: bold;
color: #EEEEEE;
width: 511px;
height: 50px;
}
#submit:hover{
background-color: #2B669A;
}
.nicknameTips{
display: none;
}
.nicknameTips img{
margin-right: 6px;
margin-left: 10px;
}
.nicknameTips span{
font-size: 14px;
}
.passwordTips{
display: none;
}
.passwordTips img{
margin-right: 6px;
margin-left: 10px;
}
.passwordTips span{
font-size: 14px;
}
.upasswordTips{
display: none;
}
.upasswordTips img{
margin-right: 6px;
margin-left: 10px;
}
.upasswordTips span{
font-size: 14px;
}
.phoneTips{
display: none;
}
.phoneTips img{
margin-right: 6px;
margin-left: 10px;
}
.phoneTips span{
font-size: 14px;
}
.title{
margin-right: 6px;
margin-left: 10px;
font-size: 14px;
color: #000000;
}
</style>
</head>
<body>
<div class="conter">
<p>QQ注册</p>
<form action="模态框.html" οnsubmit="return checkSubmit()">
<div>
<input type="text" placeholder="昵称" id="nickname"/>
<div class="nicknameTips" id="nicknameTips">
<div>
<img src="img/error.png" align="center" /><span>昵称不能为空</span>
</div>
</div>
</div>
<div>
<input type="password" placeholder="密码" id="password"/>
<div class="passwordTips" id="passwordTips">
<div>
<img id="space" src="img/green.png" align="center"/><span>不能包含空格</span>
</div>
<div>
<img id="length" src="img/info.png" align="center" /><span>长度在8~16之间</span>
</div>
<div>
<img id="content" src="img/info.png" align="center" /><span>必须包含数字、字母、符号中的其中两个</span>
</div>
</div>
</div>
<div>
<input type="password" placeholder="确认密码" id="upassword"/>
<div class="upasswordTips" id="upasswordTips">
<div>
<img src="img/error.png" align="center" /><span>两次输入的密码不相同</span>
</div>
</div>
</div>
<div>
<input type="text" placeholder="手机号码" id="phone"/>
<div class="phoneTips" id="phoneTips">
<div>
<img id="phoneImg" src="img/error.png" align="center" /><span>长度为11位的有效手机号码</span>
</div>
</div>
</div>
<div>
<input type="submit" id="submit" value="立即注册"/>
</div>
<div>
<img src="img/checkbox_check.png" id="checkbox" align="center" checked="true" /><span class="title" id="tit">我已阅读并同意相关规定和隐私协议</span>
</div>
</form>
</div>
<script>
window.οnlοad=function(){
//给多选框img定义点击事件
var checkbox=document.getElementById("checkbox");
checkbox.οnclick=function(){
//获取图片中的自定义属性的
var checked=this.getAttribute("checked");
if (checked=="true") {
this.src="img/checkbox_normal.png";
this.setAttribute("checked","false");
document.getElementById("tit").style.color="#000000";
} else{
this.src="img/checkbox_check.png";
this.setAttribute("checked","true");
document.getElementById("tit").style.color="#9D9D9D";
}
}
//给昵称注册获取焦点事件
var nickname=document.getElementById("nickname");
nickname.οnfοcus=function(){
this.style.borderColor="#6495ED";
document.getElementById("nicknameTips").style.display="none";
}
//给昵称注册失去焦点事件
nickname.οnblur=nicknamecheck;
//给密码注册获取焦点事件
var password=document.getElementById("password");
password.οnfοcus=function(){
this.style.borderColor="#6495ED";
document.getElementById("passwordTips").style.display="block";
}
//给密码注册失去焦点事件
password.οnblur=function(){
//调用验证密码的方法
var result=checkpassword();
if (result==true) {
this.style.borderColor="green";
document.getElementById("passwordTips").style.display="none";
} else{
this.style.borderColor="red";
}
}
//给确认密码注册获得焦点事件
var upassword=document.getElementById("upassword");
upassword.οnfοcus=function(){
this.style.borderColor="#6495ED";
document.getElementById("upasswordTips").style.display="none";
}
//给确认密码注册失去焦点事件
upassword.οnblur=upasswordcheck;
//给手机注册获得焦点事件
var phone=document.getElementById("phone");
phone.οnfοcus=function(){
this.style.borderColor="#6495ED";
document.getElementById("phoneTips").style.display="none";
}
//给手机注册失去焦点事件
phone.οnblur=function(){
var result=checkphone();
if (result==true) {
this.style.borderColor="green";
document.getElementById("phoneTips").style.display="none";
} else{
this.style.borderColor="red";
document.getElementById("phoneTips").style.display="block";
}
}
}
//检测用户名是否合法的函数
function nicknamecheck(){
var value=document.getElementById("nickname").value;
if (value=="") {
document.getElementById("nickname").style.borderColor="red";
document.getElementById("nicknameTips").style.display="block";
return false;
} else{
document.getElementById("nickname").style.borderColor="green";
document.getElementById("nicknameTips").style.display="none";
return true;
}
}
//检测确认密码与密码是否相同的函数
function upasswordcheck(){
var pwdv=document.getElementById("password").value;
var upwdv=document.getElementById("upassword").value;
if (pwdv==upwdv) {
document.getElementById("upassword").style.borderColor="green";
document.getElementById("upasswordTips").style.display="none";
return true;
} else{
document.getElementById("upassword").style.borderColor="red";
document.getElementById("upasswordTips").style.display="block";
return false;
}
}
//密码框输入内容发生改变时 触发的函数,有任何一个条件不满足则返回false,如果所有的条件都满足返回true
function checkpassword(){
var password=document.getElementById("password");
var b=true;
var value=password.value;
//使用正则表达式判断密码的合法性
var numReg = /[0-9]{1,}/;
var lettReg = /[a-zA-Z]{1,}/;
var codeReg = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>/?~!@#¥……&*()——|{}【】‘;:”“'。,、?]");
var spaceReg = /\s{1,}/;
if (spaceReg.test(value)) {
document.getElementById("space").src="img/info.png";
b=false;
} else{
document.getElementById("space").src="img/green.png";
}
if (value.length>=8&&value.length<=16) {
document.getElementById("length").src="img/green.png";
} else{
document.getElementById("length").src="img/info.png";
b=false;
}
//判断密码的内容必须满足至少两个正则表达式
if (numReg.test(value)&&lettReg.test(value)) {
document.getElementById("content").src="img/green.png";
} else if(numReg.test(value)&&codeReg.test(value)){
document.getElementById("content").src="img/green.png";
}else if(lettReg.test(value)&&codeReg.test(value)){
document.getElementById("content").src="img/green.png";
}else{
document.getElementById("content").src="img/info.png";
b=false;
}
return b;
}
//手机号码输入框的内容发生改变时,判断手机号码是否合法的函数,返回判断结果
function checkphone(){
var value=document.getElementById("phone").value;
var phoneReg=/1[3,4,5,7,8]\d{9}/;
if (phoneReg.test(value)&&value.length==11) {
document.getElementById("phoneImg").src="img/green.png";
return true;
} else{
document.getElementById("phoneImg").src="img/error.png";
return false;
}
}
//定义提交表单时提交的事件
function checkSubmit(){
var nicknamecheckSub=nicknamecheck();
var checkpasswordSub=checkpassword();
var checkphoneSub=checkphone();
var upasswordcheckSub=upasswordcheck();
var checkCheckBoxResult=document.getElementById("checkbox").getAttribute("checked");
alert(checkCheckBoxResult);
if (checkCheckBoxResult=="false") {
alert("请阅读服务协议并同意");
return false;
} else{
if (nicknamecheckSub==true&&checkpasswordSub==true&&checkphoneSub==true&&upasswordcheckSub==true) {
return true;
} else{
return false;
}
}
}
</script>
</body>
</html>