js注册页面的实现

最新推荐文章于 2021-06-10 09:04:04 发布

原创最新推荐文章于 2021-06-10 09:04:04 发布 · 721 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

JS 专栏收录该内容

3 篇文章

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
var Emai=false;
var Namee=false;
var Pwdss=false;
var Pwdsss=false;
var Di=false;

function $$(id){

return document.getElementById(id);
}
function email(){
var Email=$$("EmaiName");
if(Email.value.trim().length==0){
$$("info").innerHTML="*邮箱不能为空";
}else{
var spans=/\s+/;
if(spans.test(Email.value.trim())){
$$("info").innerHTML="*邮箱内容不能包含空格";
}else{
var geshi=/^\w+@\w+\.(com)|(cn)|(com\.cn)$/;
if(geshi.test(Email.value.trim())){
$$("info").innerHTML='<img src="img/gou.gif"/>';
Emai=true;
}else{
$$("info").innerHTML="*输入邮箱格式不正确";
}
}
}
}
function namess(){
var Name=$$("Name");
if(Name.value.trim().length==0){
$$("names").innerHTML="*昵称不能为空";
}else{
var a1=/\.{16}/;
if(a1.test(Name.value)){
$$("names").innerHTML="*昵称须在16个字符内";
}
else{
$$("names").innerHTML='<img src="img/gou.gif"/>';
Namee=true;
}
}
}
function mima() {
var Pwd = $$("Pwd");

if (Pwd.value.trim().length == 0) {
$$("pwds").innerHTML = "*密码不能为空";
} else {
var a2 = /^\d{6,18}$/;
var a3 = /^[a-zA-Z]{6,18}$/;
var a4 = /^.{6,18}$/;
if (a4.test(Pwd.value))
{

if (a3.test(Pwd.value) )
{

$$("pwds").innerHTML = "*密码不能全部为字母";
}
else{
if (a2.test(Pwd.value) )
{
$$("pwds").innerHTML = "*密码不能全部为数字";
}
else
{
$$("pwds").innerHTML = '<img src="img/gou.gif"/>';
Pwdss = true;
}
}

}else{
$$("pwds").innerHTML = "*密码须6-18位";
}
}
}
function p(){
var pw=$$("pw");
if(pw.value.length==0){
$$("pws").innerHTML="*此处不能为空";
}else{
if(pw.value==Pwd.value){
$$("pws").innerHTML='<img src="img/gou.gif"/>';
Pwdsss=true;
}else{
$$("pws").innerHTML="*两次输入密码不一致请从新输入";
}
}
}
var selectDefault=""
window.onload=function(){
selectDefault=$$("area").children[0];
}
function citys(obj){
var sele=obj.value;
//清理之前的所有的下拉地区的数据
$$("area").options.length=0;
switch (sele){
case "1":
$$("area").appendChild(selectDefault);
break;
case "2":
var chengdu=new Array("青羊区","高新区","金牛区");
for(var i=0;i<chengdu.length;i++){
var getArea=chengdu[i];
var createElement=document.createElement("option");
createElement.innerText=getArea;
$$("area").appendChild(createElement);
}
break;
case "3":
var beijing=new Array("火星","木星","土星");
for(var i=0;i<beijing.length;i++){
var getArea=beijing[i];
var createElement=document.createElement("option");
createElement.innerText=getArea;
$$("area").appendChild(createElement);
}
break;
default :
break;
}
}
function diqu(){
var city=$$("city");
if(city.value==1){
$$("selec").innerHTML="*请选择地区"
}else{
$$("selec").innerHTML='<img src="img/gou.gif"/>';
Di=true;
}
}
function add(){

if(Emai&&Name&&Pwdss&&Pwdsss&&Di){

return true;
}else{
return false;
}
}

</script>
</head>
<body>
<form action="work17.html" name="form1">
Email地址：<input type="text" name="EmailName" id="EmaiName" onblur="email()"/><span id="info" style="color: red"></span><br>
设置昵称：<input type="text" name="Name" id="Name" onblur="namess()"/><span id="names" style="color: red"></span><br>
设置密码：<input type="password" name="Pwd" onblur="mima()" id="Pwd"><span id="pwds" style="color: red"></span><br>
再输入一次密码：<input type="password" name="Pwds" id="pw" onblur="p()"><span id="pws" style="color: red"></span><br>
性别： <input type="radio" name="sex" checked/>男<input type="radio" name="sex">女<br>
所在地区：<select onchange="citys(this)" name="city" id="city" onblur="diqu()"/>
<option value="1">请选择城市</option>
<option value="2">成都市</option>
<option value="3">北京市</option>
</select>
<select name="area" id="area"/>
<option>请选择地区</option>
</select><span id="selec" style="color: red"></span><br>
<input type="submit" value="提交注册" onclick="return add()">
</form>
</body>
</html>