用js制作163登陆页面终极版（写了一晚上），有些功能还不太完善，有兴趣的可以去自己再实现一些功能，基本上所有的功能我都实现了，只有少数的没有实现，里面还有一些正则表达式的运用，主要还是用表格设计的，没有用div，下次上传div的。
下面看HTML代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>mischen</title>
<script src="util.js"></script>
</head>
<center>
<form action="test.html" method="get" name="phoneForm">
<table width="400px" id="phone">
<tr>
<td colspan="3" align="center">
<img src="注册字母邮箱.bmp" onclick="showMailForm()"/>
<img src="注册手机号邮箱.bmp"/>
</td>
</tr>
<tr>
<td align="right">*手机号码</td>
<td width="50%"><input type="text" name="phoneNum" style="width:100%;" onchange="valiPhone(this)"/></td>
<td>@163.com</td>
</tr>
<tr>
<td> </td>
<td colspan="2" >
<span style="color: grey;font-size: 10px;" id="phoneMsg">请填写手机号码</span>
</td>
</tr>
<tr>
<td align="right">*短信验证码</td>
<td width="50%" colspan="2"><input type="text" name="valiCode" style="width:100%;" onchange="valiCode1(this)"/></td>
</tr>
<tr>
<td> </td>
<!-- colspan 表示 跨两列 rowspan 表示跨两行-->
<td colspan="2" >
<span style="color: grey;font-size: 10px;" id="codeMsg">请查收手机短信，并填写短信中的验证码</span>
</td>
</tr>
<tr>
<td align="right">*密码</td>
<td width="50%" colspan="2"><input type="password" name="pwd" style="width:100%;" onchange="valiPwd(this)"/></td>
</tr>
<tr>
<td> </td>
<!-- colspan 表示 跨两列 rowspan 表示跨两行-->
<td colspan="2" >
<span style="color: grey;font-size: 10px;" id="pwdMsg">6~16个字符，区分大小写</span>
</td>
</tr>
<tr>
<td align="right">*确认密码</td>
<td width="50%" colspan="2"><input type="password" name="repwd" style="width:100%;" onchange="valiRepwd(this)"/></td>
</tr>
<tr>
<td> </td>
<!-- colspan 表示 跨两列 rowspan 表示跨两行-->
<td colspan="2" colspan="2">
<span style="color: grey;font-size: 10px;" id="repwdMsg">请再次填写密码
</span>
</td>
</tr>
<tr>
<td> </td>
<td colspan="2">
<img src="提交.bmp" onclick="subForm()"/>
</td>
</tr>
</table>
</form>
<form action="test.html" method="get" style="display:none" name="mailForm">
<table width="400px">
<tr>
<td colspan="3" align="center">
<img src="注册字母邮箱2.bmp" />
<img src="注册手机邮箱2.bmp" onclick="showPhoneForm()"/>
</td>
</tr>
<tr>
<td align="right">*邮件地址</td>
<td width="50%"><input type="text" name="phoneNum" style="width:100%;" onchange="mailAddr(this)"/></td>
<td>@<select>
<option value="163.com" selected>163.com</option>
<option value="126.com">126.com</option>
<option value="yeah.net">yeah.net</option>
</select></td>
</tr>
<tr>
<td> </td>
<!-- colspan 表示 跨两列 rowspan 表示跨两行-->
<td colspan="2" >
<span style="color: grey;font-size: 10px;" id="mailMsg">6~18个字符，可使用字母、数字、下划线，需以字母开头</span>
</td>
</tr>
<tr>
<td align="right">*密码</td>
<td width="50%" colspan="2"><input type="text" name="phoneNum1" style="width:100%;" onchange="mailPwd(this)"/></td>
</tr>
<tr>
<td> </td>
<!-- colspan 表示 跨两列 rowspan 表示跨两行-->
<td colspan="2" >
<span style="color: grey;font-size: 10px;" id="pwdMsg1">6~16个字符，区分大小写</span>
</td>
</tr>
<tr>
<td align="right">*确认密码</td>
<td width="50%" colspan="2"><input type="text" name="phoneNum2" style="width:100%;" onchange="mailrePwd(this)"/></td>
</tr>
<tr>
<td> </td>
<!-- colspan 表示 跨两列 rowspan 表示跨两行-->
<td colspan="2" colspan="2">
<span style="color: grey;font-size: 10px;" id="rePwdMsg1">请再次填写密码
</span>
</td>
</tr>
<tr>
<td align="right">*手机号码</td>
<td width="50%" colspan="2"><input type="text" name="phoneNum" style="width:100%;" onchange="mailPhone(this)"/></td>
</tr>
<tr>
<td> </td>
<!-- colspan 表示 跨两列 rowspan 表示跨两行-->
<td colspan="2" colspan="2">
<span style="color: grey;font-size: 10px;" id="mailPhoneMsg">忘记密码时，可以通过该手机号码快速找回密码
</span>
</td>
</tr>
<tr>
<td align="right">*验证码</td>
<td width="50%" colspan="2"><input type="text" name="phoneNum" style="width:100%;"/></td>
</tr>
<tr>
<td> </td>
<!-- colspan 表示 跨两列 rowspan 表示跨两行-->
<td colspan="2" colspan="2">
<span style="color: grey;font-size: 10px;">请填写图片中的字符，不区分大小写
</span>
</td>
</tr>
<tr>
<td align="right">*短信验证码</td>
<td width="50%" colspan="2"><input type="text" name="phoneNum" style="width:100%;"/></td>
</tr>
<tr>
<td> </td>
<!-- colspan 表示 跨两列 rowspan 表示跨两行-->
<td colspan="2" colspan="2">
<span style="color: grey;font-size: 10px;">请查收手机短信，并填写短信中的验证码
</span>
</td>
</tr>
<tr>
<td> </td>
<td colspan="2">
<img src="提交.bmp" onclick="sumForm()"/>
</td>
</tr>
</table>
</form>
</center>
<body>
</body>
</html>
<script>
var phoneForm=document.phoneForm;
var mailForm=document.forms[1];
//设置四个状态分别代表每个表单的验证结果
var phoneResult=false;
var codeResult=false;
var pwdResult=false;
var repwdResult=false;
//显示邮箱注册的表单
function showMailForm(){
phoneForm.style.display="none";
mailForm.style.display="block";
}
function showPhoneForm(){
phoneForm.style.display="block";
mailForm.style.display="none";
}
function mailAddr(mailObj){
var val1=mailObj.value;
var mailMsg=$("#mailMsg");
if(!val1){
mailMsg.innerHTML="<font color='red'>邮箱地址不能为空</font>";
return false;
}else if(!(/^[a-zA-Z]\w{5,17}$/.test(val1))) {
mailMsg.innerHTML="<font color='red'>邮箱地址必须为6~18个字符，可使用字母、数字、下划线，需以字母开头</font>";
return false;
}else{
mailMsg.innerHTML="请填写邮件地址";
return true;
}
}
function mailPhone(phoneObj1){
var val=phoneObj1.value;
var phoneMsg=$("#mailPhoneMsg");
if(!val){
phoneMsg.innerHTML="<font color='red'>手机号不能为空</font>";
//phoneResult=false;
return false;
}else if(val.length!=11){
phoneMsg.innerHTML="<font color='red'>手机号长度只能为11位</font>";
//phoneResult=false;
return false;
}else{
phoneMsg.innerHTML="请填写手机号码";
//phoneResult=true;
return true;
}
}
function valiPhone(phoneObj){
var val=phoneObj.value;
var phoneMsg=$("#phoneMsg");
if(!val){
phoneMsg.innerHTML="<font color='red'>手机号不能为空</font>";
//phoneResult=false;
return false;
}else if(val.length!=11){
phoneMsg.innerHTML="<font color='red'>手机号长度只能为11位</font>";
//phoneResult=false;
return false;
}else{
phoneMsg.innerHTML="请填写手机号码";
//phoneResult=true;
return true;
}
}
function valiCode1(codeObj){
var val=codeObj.value;
var codeMsg=$("#codeMsg");
if(!val){
codeMsg.innerHTML="<font color='red'>验证码不能为空</font>";
// codeResult=false;
return false;
}else if(val.length!=6){
codeMsg.innerHTML="<font color='red'>验证码长度只能为6位</font>";
// codeResult=false;
return false;
}else{
codeMsg.innerHTML="请查收手机短信，并填写短信中的验证码";
// codeResult=true;
return true;
}
}
function mailPwd(pwdObj1){
var val2=pwdObj1.value;
var pwdMsg1=$("#pwdMsg1");
if(!val2){
pwdMsg1.innerHTML="<font color='red'>密码不能为空</font>";
// pwdResult=false;
return false;
}else if(val2.length<6||val2.length>16){
pwdMsg1.innerHTML="<font color='red'>密码长度只能为6-16位</font>";
// pwdResult=false;
return false;
}else{
pwdMsg1.innerHTML="6~16个字符，区分大小写";
// pwdResult=true;
return true;
}
}
function valiPwd(pwdObj){
var val=pwdObj.value;
var pwdMsg=$("#pwdMsg");
if(!val){
pwdMsg.innerHTML="<font color='red'>密码不能为空</font>";
// pwdResult=false;
return false;
}else if(val.length<6||val.length>16){
pwdMsg.innerHTML="<font color='red'>密码长度只能为6-16位</font>";
// pwdResult=false;
return false;
}else{
pwdMsg.innerHTML="6~16个字符，区分大小写";
// pwdResult=true;
return true;
}
}
function mailrePwd(repwdObj1){
var val3=repwdObj1.value;
var comValue=repwdObj1.form["phoneNum1"].value;
var repwdMsg1=$("#rePwdMsg1");
if(val3!=comValue){
repwdMsg1.innerHTML="<font color='red'>两次密码输入不一致</font>";
// repwdResult=false;
return false;
}else{
repwdMsg1.innerHTML="请再次填写密码";
// repwdResult=true;
return true;
}
}
function valiRepwd(repwdObj){
var val=repwdObj.value;
//repwdObj 表单域对象 表单域对象.form 获取form表单对象 form表单对象.表单域name 表单域对象
var comValue=repwdObj.form["pwd"].value;
var repwdMsg=$("#repwdMsg");
if(val!=comValue){
repwdMsg.innerHTML="<font color='red'>两次密码输入不一致</font>";
// repwdResult=false;
return false;
}else{
repwdMsg.innerHTML="请再次填写密码";
// repwdResult=true;
return true;
}
}
function subForm(){
//用四种结果 进行判断
//var result=phoneResult&&codeResult&&pwdResult&&repwdResult;
//分别再执行一次表单验证 返回结果
// alert(valiCode1($("valiCode")[0])); 用于测试
var result=valiPhone($("phoneNum")[0])&&valiCode1($("valiCode")[0])&&valiPwd($("pwd")[0])&&valiRepwd($("repwd")[0]);
if(result){
phoneForm.submit();
}else{
alert("表单填写有误，请确认后再提交");
}
}
function sumForm(){
}
</script>
下面是js代码：
/**
*
* @param idOrName 如果传入id 前面加上# 如果传入name 直接传入
* @returns {*} 返回元素节点 如果没找到 返回null
*/
function $(idOrName){
var obj=null;
if(idOrName){
if(idOrName.charAt(0)=="#"){
obj=document.getElementById(idOrName.substring(1));
}else{
obj=document.getElementsByName(idOrName);
}
}
return obj;
}
/**
*
* @param parentNode 父节点
* @returns {Array} 所有的元素子节点
*/
function getChildNodes(parentNode){
var childs=parentNode.childNodes;
var newChilds=[];
for(var i=0;i<childs.length;i++){
if(childs[i].nodeType==1){
newChilds.push(childs[i]);
}
}
return newChilds;
}
/**
*
* @param parentNode 父节点
* @returns {*|Node} 第一个元素节点
*/
function getFirstChild(parentNode){
var firstChild=parentNode.firstChild;
if(firstChild.nodeType==3){
firstChild=firstChild.nextSibling;
}
return firstChild;
}
/**
*
* @param parentNode 父节点
* @returns {*|Node} 最后一个元素节点
*/
function getLastChild(parentNode){
var lastChild=parentNode.lastChild;
if(lastChild.nodeType==3){
lastChild=lastChild.previousSibling;
}
return lastChild;
}
/**
*
* @param node 元素节点
* @returns {*|Node} 返回下一个兄弟元素节点
*/
function getNextSibling(node){
var nextNode=node.nextSibling;
if(nextNode.nodeType==3){
nextNode=nextNode.nextSibling;
}
return nextNode;
}
/**
*
* @param node 元素节点
* @returns {*|Node} 返回前一个兄弟元素节点
*/
function getPreviousSibling(node){
var preNode=node.previousSibling;
if(preNode.nodeType==3){
preNode=preNode.previousSibling;
}
return preNode;
}
界面实现效果如下：
时间： 2024-10-10 06:56:28