JS实现京东表单注册

首先看下效果图

HTML代码如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>京东</title><style>*{margin: 0;padding: 0;}.div1{margin: 0px auto;width: 950px;height: 750px;/* border: 1px red solid; */}.div2{width: 300px;height: 700px;float: left;/* border: 1px red solid; */}.div21{width: 300px;height: 100px;float: right;/* border: 1px red solid; */}.p21{line-height: 100px;float: right;font-size: 15px;color: #999999;    margin-right: 20px;}.div3{width: 300px;height: 700px;float: left;/* border: 1px red solid; */}.div4{width: 300px;height: 700px;float: left;/* border: 1px red solid; */}span{color: red;}.div31{border: solid 1px #E8E8E8;line-height: 100px;width: 285px;height: 50px;margin-top: 25px;margin-left: 5px;background-color: #F8F8F8;}.inpu1{border: 1px #999999 solid;line-height: 100px;width: 300px;height: 50px;margin-top: 25px;margin-left: 0px;}.inpu1:hover{border: 2px #94AA85 solid;line-height: 100px;width: 300px;height: 50px;margin-top: 25px;margin-left: 0px;}.input2{border: 1px #999999 solid;line-height: 50px;width: 300px;height: 50px;margin-top: 25px;margin-left: 0px;background-color: #E64348;color:white;font-size: 20px;text-align: center;}.input3{line-height: 100px;}.p2{text-align: center;line-height: 100px;font-size: 12px;}.p3{text-align: center;line-height: 50px;font-size: 12px;}.div{margin: 0px auto;width: 1050px;height: 750px;/* border: 1px red solid; */}.div ul{margin-top: 10px;margin-left: 240px;width: 800px;height: 100px;list-style: none;}.div ul li{float: left;margin-left: 5px;height: 70px;}.div ul li a{display: block;box-sizing: border-box;padding: 10px 28px;border: 1px silver solid;font-weight: bold;}.div ul li a:hover{display: block;box-sizing: border-box;padding: 10px 28px;border: 1px silver solid;font-weight: bold;color: red;}.clear{clear: both;}     #pv1,#pv2,#pv3,#pv4,#pv5{display: none;}</style><script src="jd.js"></script><script src="jdcode.js"></script>
</head>
<body><div class="div"><ul><li><a href="#">个人用户</a></li><li><a href="#">企业用户</a></li><li><a href="#">internatioal Customers</a></li></ul><div class="clear"></div><div class="div1"><div class="div2"><div class="div21"><p class="p21"><span>*</span>用户名：</p></div><div class="div21"><p class="p21"><span>*</span>请设置密码：</p></div><div class="div21"><p class="p21"><span>*</span>请确认密码：</p></div><div class="div21"><p class="p21"><span>*</span>验证手机：</p></div><div class="div21"><p class="p21"><span>*</span>短信验证：</p></div></div><div class="div3"><div class="div21"><input class="inpu1" type="text" name="yhm" id="t1" onblur="no1()" onfocus="yes1()"/></div><div class="div21"><input  class="inpu1" type="password" name="yhm" id="t2"  onblur="no2()" onfocus="yes2()"/></div><div class="div21"><input class="inpu1" type="password" name="yhm" id="t3" onblur="no3()" onfocus="yes3()"/></div><div class="div21"><input class="inpu1" type="text" name="yhm" id="t4" onblur="no4()" onfocus="yes4()"/></div><div class="div21"><input class="inpu1" type="text" name="yhm" id="t5"  onblur="no()" onfocus="yes()"/></div><div class="div21"><p class="p2"><input type="checkbox" class="input3"/>&nbsp;&nbsp;我以阅读并同意<a href="#">《京东用户注册协议》</a></p></div><div class="div21"><input class="input2" type="button" value="立即注册" onclick="check()" id="qidong"/></div></div><div class="div4"><div class="div21" ><div class="div31" id="pv1"><p class="p3">4-20为字符，支持中英文，数字及“. ,—”组合</p>  </div></div><div class="div21"><div class="div31" id="pv2"><p class="p3">密码最少8位，必须同时包括英文，数字</p>  </div></div><div class="div21"><div class="div31" id="pv3"><p class="p3">必须与密码保持一致</p>  </div></div><div class="div21"><div class="div31" id="pv4"><p class="p3">手机号码为11为数字不能为空</p>  </div></div><div class="div21"><div class="div31" id="pv5"><p class="p3" >验证码为4位数字，请注意查收短信</p>  </div></div></div></div></div>
</body>

JS的jdcode.js代码如下

function $(str){return document.getElementById(str);
}function check(){if(name()&&pass()&&rpass()&&phone()&&note()){document.write("<h2>恭喜您注册成功</h2>");}
}function name(){var nameObj=$("t1");var strName=nameObj.value;if(strName.length==0){alert("用户名不能为空");nameObj.focus;return false;}if(strName.length<4||strName>16){alert("用户名应有4-20的字符组成");nameObj.select();return false;}return true;
}function pass(){var passObj=$("t2");var strPass=passObj.value;if(strPass.length==0){alert("密码不能为空");passObj.focus();return false;
}if(strPass.length<8){alert("密码最小长度应该8位");passObj.select();return false;}var english=false;var figure=false;for(var i=0;i<strPass.length;i++){if((strPass[i]>='a'&&strPass[i]<='z')||(strPass[i]>='A'&&strPass[i]<='Z')){english=true;}if(strPass[i]>='0'&&strPass[i]<='9'){figure=true;}}if(!(english==true&&figure==true)){alert("密码必须同时包括英文，数字");return false;}return true;
}function rpass(){var passObj=$("t2");var rPssObj=$("t3");var strPass=passObj.value;var strRpass=rPssObj.value;if(strPass!=strRpass){alert("密码与原密码不一致");rPssObj.select();return false;}return true;
}function phone(){var phoneObj=$("t4");var strPhone=phoneObj.value;if(strPhone.length==0){alert("手机号码不能为空");phoneObj.focus();return false;}if(strPhone.length!=11){alert("手机号码长度应为十一位数");phoneObj.select();return false;}for(var i=0;i<strPhone.length;i++){//  strPhone.charAt(i) --> str[i] 返回下标为I 的字符 if(!(strPhone.charAt(i)>='0'&&strPhone.charAt(i)<='9')){alert("手机号码自能为数字");phoneObj.select();return false;}} return true;
}function note(){var noteObj=$("t5");var strNote=noteObj.value;if(strNote.length!=6){alert("验证码应为六位");noteObj.select();return false; }if(isNaN(strNote)){alert("验证码应该为数字");noteObj.select();return false;}return true;
}

JS中 jd.js的代码如下

function yes(){document.getElementById("pv5").style.display="block";
}function no(){document.getElementById("pv5").style.display="none";
}
function yes1(){document.getElementById("pv1").style.display="block";
}function no1(){document.getElementById("pv1").style.display="none";
}
function yes2(){document.getElementById("pv2").style.display="block";
}function no2(){document.getElementById("pv2").style.display="none";
}
function yes3(){document.getElementById("pv3").style.display="block";
}function no3(){document.getElementById("pv3").style.display="none";
}
function yes4(){document.getElementById("pv4").style.display="block";
}function no4(){document.getElementById("pv4").style.display="none";
}

JS实现京东表单注册相关推荐

js 提交form表单,js更改form表单的action属性
2019独角兽企业重金招聘Python工程师标准>>> js 提交form表单 <s:form id="formID1" action="favo ...
js实现Form表单submit提交截获数据（各浏览器通用）
js实现Form表单submit提交截获数据(各浏览器通用) js实现Form表单submit提交截获数据(各浏览器通用) No Comments | js , 安全 , PHP | by calms ...
验证码的编写——本质：图片目的：防止恶意表单注册
验证码 1. 本质:图片 2. 目的:防止恶意表单注册 CheckCodeServlet.java package cn.itcast.web.servlet;impo ...
关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题
方法使用前需了解: 来自"和"小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查 ...
php判断表单提交是否为空,JS判断提交表单不能为空代码多种方案
在做前端时我们希望用户按要求提交数据了,如果提交了空我们就需要进入提示,在js中判断表单为空我们直接使用xx==空就可以了,下面看实例. 例 function checkpost() { if(myf ...
js模拟form表单提交数据, js模拟a标签点击跳转，避开使用window.open引起来的浏览器阻止问题...
js模拟form表单提交数据, js模拟a标签点击跳转,避开使用window.open引起来的浏览器阻止问题 js模拟form表单提交数据源码: /** * js模拟form表单提交 * @param ...
js进阶 14-8 表单序列化函数serializeArray()和serialize()的区别是什么
js进阶 14-8 表单序列化函数serializeArray()和serialize()的区别是什么一.总结一句话总结:两者都是对表单进行序列化,serializeArray()返回的是json ...
用js将form表单同时提交到两个不同页面的方法
用js将form表单同时提交到两个不同页面的方法: <script type="text/javascript"> function dosubmit(){ windo ...
html得到上传文件类型后缀,js获取上传文件后缀名（附js提交form表单）
js获取上传文件后缀名(附js提交form表单) 代码如下: function check_file() { var strFileName=form1.FileName.value; if (str ...
JS阻止form表单提交失败
JS阻止form表单提交失败问题简介解决办法问题简介 <form th:action="@{/user.do}" method="post" ons ...

JS实现京东表单注册

JS实现京东表单注册相关推荐

最新文章

热门文章