<html lang="en">
<head>
<meta charset="UTF-8">
<title>京东登陆表单验证</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div id="box">
<div class="register">
<div class="userName same">
<span class="big">用户名</span>
<input id="userName" type="text" placeholder="您的账户名和登陆名"/>
</div>
<div class="tip">
<i></i>
<p></p>
</div>
</div>
<div class="register">
<div class="setPsd same">
<span>设置密码</span>
<input id="psd" type="password" placeholder="建议至少两种字符组合" />
</div>
<div class="tip">
<i></i>
<p></p>
</div>
</div>
<div class="register">
<div class="mSpsd same">
<span>确认密码</span>
<input id="mSpsd" type="password" placeholder="建议至少两种字符组合" />
</div>
<div class="tip">
<i></i>
<p></p>
</div>
</div>
<div class="register">
<div class="email same">
<span>邮箱验证</span>
<input id="email" type="text" placeholder="您的邮箱" />
</div>
<div class="tip">
<i></i>
<p></p>
</div>
</div>
<div class="register">
<div class="mobile same">
<span>手机号码</span>
<input id="phone" type="text" placeholder="您的手机号" />
</div>
<div class="tip">
<i></i>
<p></p>
</div>
</div>
<div class="check">
<div>
<label>
<input id="ck" type="checkbox" />
<span>我已阅读并同意<em>《京东注册协议》</em></span>
</label>
</div>
<div class="tip">
<i></i>
<p></p>
</div>
</div>
<input class="btn" id="btn" type="button" value="注册" />
</div>
<script type="text/javascript" src="js/login.js"></script>
</body>
</html>
<!--以上为html结构-->
*{
margin:0;
padding:0;
border:0;
}
i,em{
font-style:normal;
}
body{
font-size:12px;
}
#box{
margin:200px auto 0;
width:420px;
}
.register{
position:relative;
margin:23px 40px 33px 30px;
}
.same{
border:1px solid #ccc;
height:60px;
}
.right{
background:url(../images/right.png) no-repeat 330px 22px;
}
.same span{
display:inline-block;
width:80px;
text-indent:10px;
line-height:60px;
letter-spacing:5px;
color:#333;
}
.same input{
width:240px;
height:60px;
border:none;
text-indent:20px;
}
.tip{
position:absolute;
left:0;
top:70px;
width:420px;
height:20px;
}
.hide{
display:none;
}
.show{
display:block;
}
.tip i{
float:left;
width:18px;
height:20px;
}
.tip i.ruo{
background:url(../images/ruo.png);
}
.tip i.zhong{
background:url(../images/zhong.png);
}
.tip i.qiang{
background:url(../images/qiang.png);
}
.tip i.gray{
background:url(../images/default.png);
}
.tip p.gray{
color:gray;
}
.tip i.red{
background:url(../images/error.png);
}
.tip p.red{
color:#f00;
}
.tip p{
float:left;
height:20px;
line-height:20px;
}
.check{
position:relative;
margin:0 0 30px 30px;
}
.check .tip{
top:20px;
}
.btn{
margin-left:30px;
width:350px;
height:60px;
background:#f00;
font-size:16px;
color:#fff;
letter-spacing:5px;
}
/*以上为css样式*/
/*
点击btn事件 1 、 复选框被选中 ck.checked 当前面五个程序全部为真时 alert 注册成功! 未全部成功时,跟踪显示为假对象 (全) 并清除复选框未选中时显示的样式
2、复选框未被选中 显示 error
* 用户名: 不走事件对象时 len为0 显示被跟踪样式
*
* onfocus事件 len为0 执行提示输入信息 onblur len为0 清空显示样式 onkeyup即其它类型 事件 len不为0 判断len范围 若不合格 报长度范围 若合格匹配正则规则 匹配 返回right 不匹配 返回 error
*
*
* 密码 : 不走事件对象时 len为0 显示被跟踪样式 onfocus事件 len为0 执行提示输入信息 onblur len为0 清空显示样式
*
* onkeyup 事件 执行其它 len 不为0 判断长度 不符合 报长度 error ; 符合 将密码 遍历 用每个 字符 与正则匹配 ,符合 规则 用开关记下强度 不符合 格式错误 注意样式清空
*
*
* 其它时间原理一致 ,,注意细节即可
*
*
*
*
*
*
*
* */
function $(id){
return document.getElementById(id);//获取有id名称的元素节点对象
}
var regs={ //正则规则对象
userName:/^([\u4e00-\u9fa5]|[a-zA-Z0-9_-])+$/, //用户名正则
setPsdNumber:/\d/, //每一个数字密码正则
setPsdLetter:/[a-zA-Z]/, //每一个字母密码正则
email:/^[1-9a-zA-Z]{3,11}@(qq|163|126)\.(com|cn)$/, //邮箱正则
phone:/^[1](3|5|8)\d{9}$/ //手机号正则
}
function getLevel(val){//获得密码强度
var level=0;
var nFlag=true;//开关,,,,,负责只记录一个数字或字母或特殊字符,将其他相同字母数字或特殊字符的level++屏蔽
var lFlag=true;
var oFlag=true;
for(var i=0;i<val.length;i++){
if( regs.setPsdNumber.test( val[i] ) ){//当前的val[i]匹配正则的结果为true 在开关为true 执行++ 赋值开关为false
if(nFlag){
level++;
nFlag=false;
}
}else if( regs.setPsdLetter.test( val[i] ) ){
if(lFlag){
level++;
lFlag=false;
}
}else{
if(oFlag){
level++;
oFlag=false;
}
}
}
return level; //便于之后拿到函数getLevel的值
}
window.οnlοad=function(){
var btn = $('btn');
var userName = $('userName');
var psd = $('psd');
var mSpsd = $('mSpsd');
var email = $('email');
var phone = $('phone');
var ck = $('ck');
var tipCk=ck.parentNode.parentNode.nextElementSibling;//获取元素节点操作对象,通过调用$函数
userName.οnfοcus=userName.οnblur=userName.οnkeyup=function(e){ //获焦事件、失焦事件、按键抬起事件共同执行一个事件处理程序
var _event = window.event||e; //事件对象的兼容写法
checkUserName(_event); //调用检查用户名的函数
}
/*检测用户名*/
function checkUserName(_e){
var type; //e.type返回值可以判断事件类型 ,定义var type 为undefined 区分开 事件对象处理程序 以及单纯事件触发的处理程序
if(_e){
type=_e.type;//判断事件类型,并赋值给type
}
var tipUser=userName.parentNode.nextElementSibling;//局部变量,作用于函数内部
var val=userName.value;
var ulen=val.length;
//相同对象的事件执行不同的事件处理函数时,后面执行的效果会覆盖之前,hack:将函数写return;
if(type=="focus"){ //获焦事件所执行的处理程序
if(ulen==0){ //length为0显示的内容
tipUser.children[0].className='gray';
tipUser.children[1].className='gray';
tipUser.children[1].innerHTML='支持汉字、字母、数字、"-"、"_"、4到20个字符';
return false; //返回值 停止当前函数 并给函数返回false
}
}
if(type=="blur"){ //失焦事件所执行的内容 清空所有特殊样式
if(ulen==0){
tipUser.children[0].className='';
tipUser.children[1].className='';
tipUser.children[1].innerHTML='';
return false;
}
}
/*其他情况*/
if(ulen==0){
tipUser.children[0].className='red';//js运行机制不走事件对象处理程序时所执行的其它情况 //跟踪机制
tipUser.children[1].className='red';
tipUser.children[1].innerHTML='请输入用户名';
return false;
}else{
if( regs.userName.test(val) ){ // 正则匹配时 若内容长度符合规则返回right 不符合报错 4-20位字符
if(ulen<4||ulen>20){
tipUser.className='tip show';
tipUser.children[0].className='red';
tipUser.children[1].className='red';
tipUser.children[1].innerHTML='4到20位字符';
userName.parentNode.className='userName same';
return false;
}else{
userName.parentNode.className='userName same right';
tipUser.className='tip hide';
return true;
}
}else{ //不匹配时 返回格式错误
tipUser.children[0].className='red';
tipUser.children[1].className='red';
tipUser.children[1].innerHTML='格式错误,仅支持数字、字母、汉字、“-”、“_”';
return false;
}
}
}
psd.οnfοcus=psd.οnblur=psd.οnkeyup=function(e){
var _event = window.event||e;
checkPsd(_event);
}
function checkPsd(_e){
var type;
if(_e){
type=_e.type;
}
var tipPsd=psd.parentNode.nextElementSibling;
var val=psd.value;
var len=val.length;
if(type=="focus"){
if(len==0){
tipPsd.children[0].className='gray';
tipPsd.children[1].className='gray';
tipPsd.children[1].innerHTML='建议使用字母、数字和符号两种以上的组合,6-20个字符';
return false;
}
}
if(type=="blur"){
if(len==0){
tipPsd.children[0].className='';
tipPsd.children[1].className='';
tipPsd.children[1].innerHTML='';
return false;
}
}
/*其他情况*/
if(len==0){
tipPsd.children[0].className='red';
tipPsd.children[1].className='red';
tipPsd.children[1].innerHTML='请输入密码';
return false;
}else{
if(len<6||len>20){
tipPsd.className='tip show';
tipPsd.children[0].className='red';
tipPsd.children[1].className='red';
tipPsd.children[1].innerHTML='6到20位字符';
psd.parentNode.className='setPsd same';
return false;
}else{
var level=getLevel(val);//调用密码强度判断函数
switch(level){
case 1: // 强度为1
tipPsd.children[0].className='ruo';
tipPsd.children[1].innerHTML='有被盗风险,建议使用字母、数字和符号两种及以上组合';
break;
case 2: //强度为2
tipPsd.children[0].className='zhong';
tipPsd.children[1].innerHTML='安全强度适中,可以使用三种以上的组合来提高安全强度';
break;
case 3: //强度为3
tipPsd.children[0].className='qiang';
tipPsd.children[1].innerHTML='你的密码很安全';
break;
}
psd.parentNode.className='setPsd same right';
return true;
}
}
}
mSpsd.οnfοcus=mSpsd.οnblur=mSpsd.οnkeyup=function(e){
var _event = window.event||e;
checkmSpsd(_event);
}
function checkmSpsd(_e){
var type;
if(_e){
type=_e.type;
}
var val=psd.value;
var tipmSpsd=mSpsd.parentNode.nextElementSibling;
var val1=mSpsd.value;
var len=val1.length;
//相同对象的事件执行不同的事件处理函数时,后面执行的效果会覆盖之前,hack:将函数写return;
if(type=="focus"){
if(len==0){
tipmSpsd.children[0].className='gray';
tipmSpsd.children[1].className='gray';
tipmSpsd.children[1].innerHTML='6到20位字符';
return false;
}
}
if(type=="blur"){
if(len==0){
tipmSpsd.children[0].className='';
tipmSpsd.children[1].className='';
tipmSpsd.children[1].innerHTML='';
return false;
}
}
/*其他情况*/
if(len==0){
tipmSpsd.children[0].className='red';
tipmSpsd.children[1].className='red';
tipmSpsd.children[1].innerHTML='请确认密码';
return false;
}else{
if( val==val1 ){
mSpsd.parentNode.className='mSpsd same right';
tipmSpsd.className='tip hide';
return true;
}else{
mSpsd.parentNode.className='mSpsd same';
tipmSpsd.className='tip show';
tipmSpsd.children[0].className='red';
tipmSpsd.children[1].className='red';
tipmSpsd.children[1].innerHTML='密码输入不一致!';
return false;
}
}
}
email.οnfοcus=email.οnblur=email.οnkeyup=function(e){
var _event = window.event||e;
checkEmail(_event);
}
function checkEmail(_e){
var type;
if(_e){
type=_e.type;
}
var tipEmail=email.parentNode.nextElementSibling;
var val=email.value;
var len=val.length;
//相同对象的事件执行不同的事件处理函数时,后面执行的效果会覆盖之前,hack:将函数写return;
if(type=="focus"){
if(len==0){
tipEmail.children[0].className='gray';
tipEmail.children[1].className='gray';
tipEmail.children[1].innerHTML='绑定邮箱你可以通过它找回密码';
return false;
}
}
if(type=="blur"){
if(len==0){
tipEmail.children[0].className='';
tipEmail.children[1].className='';
tipEmail.children[1].innerHTML='';
return false;
}
}
/*其他情况*/
if(len==0){
tipEmail.children[0].className='red';
tipEmail.children[1].className='red';
tipEmail.children[1].innerHTML='请输入邮箱名';
return false;
}else{
if(len<9){
tipEmail.children[0].className='';
tipEmail.children[1].className='';
tipEmail.children[1].innerHTML='';
return false;
}else{
if( regs.email.test(val) ){
email.parentNode.className='email same right';
tipEmail.className='tip hide';
return true;
}else{
email.parentNode.className='email same';
tipEmail.className='tip show';
tipEmail.children[0].className='red';
tipEmail.children[1].className='red';
tipEmail.children[1].innerHTML='格式3-11位数字或字母+@qq|126|163+.com|cn';
return false;
}
}
}
}
phone.οnfοcus=phone.οnblur=phone.οnkeyup=function(e){
var _event = window.event||e;
checkPhone(_event);
}
function checkPhone(_e){
var type;
if(_e){
type=_e.type;
}
var tipPhone=phone.parentNode.nextElementSibling;
var val=phone.value;
var len=val.length;
//相同对象的事件执行不同的事件处理函数时,后面执行的效果会覆盖之前,hack:将函数写return;
if(type=="focus"){
if(len==0){
tipPhone.children[0].className='gray';
tipPhone.children[1].className='gray';
tipPhone.children[1].innerHTML='绑定手机号你可以通过它找回密码';
return false;
}
}
if(type=="blur"){
if(len==0){
tipPhone.children[0].className='';
tipPhone.children[1].className='';
tipPhone.children[1].innerHTML='';
return false;
}
}
/*其他情况*/
if(len==0){
tipPhone.children[0].className='red';
tipPhone.children[1].className='red';
tipPhone.children[1].innerHTML='请输入手机号';
return false;
}else{
if( regs.phone.test(val) ){
phone.parentNode.className='phone same right';
tipPhone.className='tip hide';
return true;
}else{
phone.parentNode.className='phone same';
tipPhone.className='tip show';
tipPhone.children[0].className='red';
tipPhone.children[1].className='red';
tipPhone.children[1].innerHTML='11位数字,首位是1、第二位是3或5或8';
return false;
}
}
}
btn.οnclick=function(){
if(ck.checked){
tipCk.children[0].className='';
tipCk.children[1].className='';
tipCk.children[1].innerHTML='';
if(
checkUserName()&&checkPsd()&&checkmSpsd()&&checkEmail()&&checkPhone()
){
alert('注册成功!');
}
}else{
tipCk.children[0].className='red';
tipCk.children[1].className='red';
tipCk.children[1].innerHTML='请同意注册协议';
}
}