DOM------小综合应用登陆
2016-06-02 20:25
183 查看
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
var ifEmail=false;
var ifUser=false;
var ifPwd=false;
var ifPwd2=false;
function email()
{
var regdress = /^\w+@\w+\.((cn)|(com)|(com\.cn))$/;//邮箱正则
var adress = document.getElementById("adress").value; var ifok=false;
if(regdress.test(adress)==false)
{
if(document.getElementById("info1").children.length>0)//先删除子元素
{
document.getElementById("info1").removeChild(document.getElementById("info1").children[0]);
}
var node =document.getElementById("info1").children;
if(node.length==0)
{
var words = document.createElement("span");
words.style.color = "red";
words.id="checkEmail";
words.innerHTML = "邮箱格式不正确";
document.getElementById("info1").appendChild(words);
}
}
else
{
var checks =document.getElementById("checkEmail");
checks.innerHTML="<img src='images/1star.gif'>";
ifEmail=true;
}
}
function username()
{
//正则表达式
var regName=/^\w{1,6}$/
var name =document.getElementById("name").value;
if(regName.test(name.trim())==false)
{
if(document.getElementById("info2").children.length==0)
{
var cname =document.createElement("span");
cname.style.color="red";
cname.innerHTML="用户名不能为空或者不能超过6位数";
document.getElementById("info2").appendChild(cname);
}
}
else
{
if(document.getElementById("info2").children.length>0)
{
document.getElementById("info2").removeChild(document.getElementById("info2").children[0]);
ifUser=true;
}
}
}
function pwd()
{
//正则
var regPwd = /^\w{1,12}$/;
var regpwd1=/^\d{1,12}$/;
var regpwd2=/^[a-zA-Z]{1,12}$/
var pwd =document.getElementById("pwd").value;
if(regPwd.test(pwd)==true)
{
if(regpwd1.test(pwd)==false)
{
if(regpwd2.test(pwd)==false)
{
if(document.getElementById("info3").children.length>0)
{
document.getElementById("info3").removeChild(document.getElementById("info3").children[0]);
ifPwd=true;
}
}
else
{
document.getElementById("info3").removeChild(document.getElementById("info3").children[0]);
help("密码不能全部为字母");
}
}
else
{
document.getElementById("info3").removeChild(document.getElementById("info3").children[0]);
help("密码不能全部为数字");
}
}
else
{
if(document.getElementById("info3").children.length>0)
{
document.getElementById("info3").removeChild(document.getElementById("info3").children[0]);
}
help("密码不能为空或者不能超过12位数或者不能有非法字符");
}
}
function help(obj)
{
if(document.getElementById("info3").children.length==0)
{
var cpwd = document.createElement("span");
cpwd.style.color="red";
cpwd.innerHTML=obj;
document.getElementById("info3").appendChild(cpwd);
}
}
function Pwd2()
{
var pwd1 =document.getElementById("pwd").value;
var pwd2=document.getElementById("pwd2").value;
if(pwd1==pwd2)
{
ifPwd2=true;
if(document.getElementById("info4").children.length>0)
{
document.getElementById("info4").removeChild(document.getElementById("info4").children[0]);
}
}
else
{
if(document.getElementById("info4").children.length==0)
{
var cpwd2 =document.createElement("span");
cpwd2.style.color="red";
cpwd2.innerHTML="两次密码输入不一致";
document.getElementById("info4").appendChild(cpwd2);
}
}
}
window.onload=function()
{
setInterval("pwd()",100);
}
function changer(obj)
{
document.getElementById("area").options.length=0;//清空
var index = obj.value;
switch (index)
{
case "1":
var s1= document.createElement("option");
s1.innerHTML="---选择所在的地区----";
document.getElementById("area").appendChild(s1);
break;
case "2":
var arrs = new Array("金牛区","青羊区","双流区","高新西区");
for(var i=0;i<arrs.length;i++)
{
var s2= document.createElement("option");
s2.innerHTML=arrs[i];
document.getElementById("area").appendChild(s2);
}
break;
case "3":
break;
case "4":
break;
default :
break;
}
}
function checkAll()
{
/*alert("ifemail"+ifEmail);
alert("ifpwd"+ifPwd);
alert("ifpdw2"+ifPwd2);
alert("ifuser"+ifUser);*/
if(ifEmail==true&&ifPwd==true&&ifPwd2==true&&ifUser==true)
{
return true;
}
else
{
return false;
}
}
</script>
</head>
<body>
<form>
<table>
<tr><td> Email地址：</td><td><input type="text" id="adress" onblur="email();"><em id="info1"></em></td></tr>
<tr><td> 设置呢名：</td><td><input type="text" id="name" onblur="username();"><em id="info2"><span id="info5"></span></em></td></tr>
<tr><td> 设定密码：</td><td><input type="text" id="pwd"><em id="info3"></em></td></tr>
<tr><td> 再次输入密码：</td><td><input type="text" id="pwd2" onblur="Pwd2();"><em id="info4"></em></td></tr>
<tr><td>性别：</td><td><input type="radio" name="sex">男<input type="radio" name="sex">女</td></tr>
<tr><td>所在地区：</td><td>
<select id="city" onchange="changer(this)">
<option value="1">---选择所在的城市----</option>
<option value="2">成都</option>
<option value="3">遂宁</option>
<option value="4">北京</option>
</select>
<select id="area">
<option value="1">---选择所在的地区----</option>
</select>
</td></tr>
</table>
<input type="submit" onclick="return checkAll();">
</form>
</body>
</html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
var ifEmail=false;
var ifUser=false;
var ifPwd=false;
var ifPwd2=false;
function email()
{
var regdress = /^\w+@\w+\.((cn)|(com)|(com\.cn))$/;//邮箱正则
var adress = document.getElementById("adress").value; var ifok=false;
if(regdress.test(adress)==false)
{
if(document.getElementById("info1").children.length>0)//先删除子元素
{
document.getElementById("info1").removeChild(document.getElementById("info1").children[0]);
}
var node =document.getElementById("info1").children;
if(node.length==0)
{
var words = document.createElement("span");
words.style.color = "red";
words.id="checkEmail";
words.innerHTML = "邮箱格式不正确";
document.getElementById("info1").appendChild(words);
}
}
else
{
var checks =document.getElementById("checkEmail");
checks.innerHTML="<img src='images/1star.gif'>";
ifEmail=true;
}
}
function username()
{
//正则表达式
var regName=/^\w{1,6}$/
var name =document.getElementById("name").value;
if(regName.test(name.trim())==false)
{
if(document.getElementById("info2").children.length==0)
{
var cname =document.createElement("span");
cname.style.color="red";
cname.innerHTML="用户名不能为空或者不能超过6位数";
document.getElementById("info2").appendChild(cname);
}
}
else
{
if(document.getElementById("info2").children.length>0)
{
document.getElementById("info2").removeChild(document.getElementById("info2").children[0]);
ifUser=true;
}
}
}
function pwd()
{
//正则
var regPwd = /^\w{1,12}$/;
var regpwd1=/^\d{1,12}$/;
var regpwd2=/^[a-zA-Z]{1,12}$/
var pwd =document.getElementById("pwd").value;
if(regPwd.test(pwd)==true)
{
if(regpwd1.test(pwd)==false)
{
if(regpwd2.test(pwd)==false)
{
if(document.getElementById("info3").children.length>0)
{
document.getElementById("info3").removeChild(document.getElementById("info3").children[0]);
ifPwd=true;
}
}
else
{
document.getElementById("info3").removeChild(document.getElementById("info3").children[0]);
help("密码不能全部为字母");
}
}
else
{
document.getElementById("info3").removeChild(document.getElementById("info3").children[0]);
help("密码不能全部为数字");
}
}
else
{
if(document.getElementById("info3").children.length>0)
{
document.getElementById("info3").removeChild(document.getElementById("info3").children[0]);
}
help("密码不能为空或者不能超过12位数或者不能有非法字符");
}
}
function help(obj)
{
if(document.getElementById("info3").children.length==0)
{
var cpwd = document.createElement("span");
cpwd.style.color="red";
cpwd.innerHTML=obj;
document.getElementById("info3").appendChild(cpwd);
}
}
function Pwd2()
{
var pwd1 =document.getElementById("pwd").value;
var pwd2=document.getElementById("pwd2").value;
if(pwd1==pwd2)
{
ifPwd2=true;
if(document.getElementById("info4").children.length>0)
{
document.getElementById("info4").removeChild(document.getElementById("info4").children[0]);
}
}
else
{
if(document.getElementById("info4").children.length==0)
{
var cpwd2 =document.createElement("span");
cpwd2.style.color="red";
cpwd2.innerHTML="两次密码输入不一致";
document.getElementById("info4").appendChild(cpwd2);
}
}
}
window.onload=function()
{
setInterval("pwd()",100);
}
function changer(obj)
{
document.getElementById("area").options.length=0;//清空
var index = obj.value;
switch (index)
{
case "1":
var s1= document.createElement("option");
s1.innerHTML="---选择所在的地区----";
document.getElementById("area").appendChild(s1);
break;
case "2":
var arrs = new Array("金牛区","青羊区","双流区","高新西区");
for(var i=0;i<arrs.length;i++)
{
var s2= document.createElement("option");
s2.innerHTML=arrs[i];
document.getElementById("area").appendChild(s2);
}
break;
case "3":
break;
case "4":
break;
default :
break;
}
}
function checkAll()
{
/*alert("ifemail"+ifEmail);
alert("ifpwd"+ifPwd);
alert("ifpdw2"+ifPwd2);
alert("ifuser"+ifUser);*/
if(ifEmail==true&&ifPwd==true&&ifPwd2==true&&ifUser==true)
{
return true;
}
else
{
return false;
}
}
</script>
</head>
<body>
<form>
<table>
<tr><td> Email地址：</td><td><input type="text" id="adress" onblur="email();"><em id="info1"></em></td></tr>
<tr><td> 设置呢名：</td><td><input type="text" id="name" onblur="username();"><em id="info2"><span id="info5"></span></em></td></tr>
<tr><td> 设定密码：</td><td><input type="text" id="pwd"><em id="info3"></em></td></tr>
<tr><td> 再次输入密码：</td><td><input type="text" id="pwd2" onblur="Pwd2();"><em id="info4"></em></td></tr>
<tr><td>性别：</td><td><input type="radio" name="sex">男<input type="radio" name="sex">女</td></tr>
<tr><td>所在地区：</td><td>
<select id="city" onchange="changer(this)">
<option value="1">---选择所在的城市----</option>
<option value="2">成都</option>
<option value="3">遂宁</option>
<option value="4">北京</option>
</select>
<select id="area">
<option value="1">---选择所在的地区----</option>
</select>
</td></tr>
</table>
<input type="submit" onclick="return checkAll();">
</form>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- python扩展实现方法--python与c混和编程
- python扩展实现方法--python与c混和编程
- HDU 5705 Clock（模拟）
- 补课:2014GoogleIO大会发布的 Material Design(中文版)
- 在java web 工程中跳过过滤器
- 聚类算法实践（四）——算法总结
- 北航内部的计算机网络复习大纲
- ThinkSNS发展进程
- hdoj-5491-The Next
- java基础知识---java语法基础
- [转] 微信jssdk录音功能开发记录
- Android的HTTP操作库Volley的基本使用教程
- 解析java中的hashMap
- 微信硬件平台从入门到精通（服务器端） 2
- myeclipse6.5自动补全
- 工厂模式中的反射
- su认证失败&文件夹里打开终端的方法&atom安装
- Android常用权限大全，Android各种访问权限Permission详解
- C++之指向数据成员的指针和指向成员函数的指针
- 七牛---关于JavaScript SDK各种问题总结