html+css+javaScript实现一个简单的注册界面

最新推荐文章于 2024-04-30 10:00:00 发布

小小城序员

最新推荐文章于 2024-04-30 10:00:00 发布

阅读量9.2k

点赞数 28

分类专栏： html css javascript 文章标签： html css javascript

本文链接： https://blog.csdn.net/weixin_46791942/article/details/107861315

版权

html 同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

css

2 篇文章 0 订阅

订阅专栏

javascript

2 篇文章 0 订阅

订阅专栏

html+css+javaScript实现一个简单的注册界面

自学html，css，js也有一小段时间了，尝试着做点东西来巩固一下，就决定实现这个简单的注册界面。实现的注册界面很普通，没有加上华丽的装饰，但能实现基本的注册界面应有的效果。

原版使用DOM的注册界面的效果：
1.未输入或输入框为空时会有默认值提示输入信息
2.输入框获取焦点时时会清空默认值
3.输入不符合要求时会有警告提示
4.全部信息未输入正确时无法注册提交
5.地址选择时，选择省份后会有该省份相应的市提供选择

注册界面：

附上代码：（代码里有详细的注释）
logininterface.html

<!--注册界面的html-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册界面</title>
<link rel="stylesheet" type="text/css" href="logininterface.css">
</head>
<body>
<h1 class="center">注册界面</h1>

<form action="xxx" method="get">
<table class="tablecenter "
<!--姓名-->
<tr>
<td>姓名:</td>
<td><input type="text" value="请输入你的姓名" class="center" id="name"  name="user"></td>
<td id="namewarn" class="warn"></td>
</tr>

<!--性别-->
<tr>
<td>性别:</td>
<td><input type="radio" name="gender" value="female" id="female">Female<input type="radio" name="gender" value="male" id="male">Male</td>
<td id="genderwarn" class="warn"></td>
</tr>

<!--邮箱-->
<tr>
<td>邮箱:</td>
<td><input type="text" value="请输入你的邮箱" class="center"  id="email" name="email"></td>
<td id="emailwarn" class="warn"></td>
</tr>

<!--手机号码-->
<tr>
<td>手机号:</td>
<td><input type="text" value="请输入你的手机号" class="center" id="phone" name="phone"></td>
<td id="phonewarn" class="warn"></td>
</tr>

<!--地址-->
<tr>
<td>地址:</td>
<td>
<select id="province">
<option>-请选择省-</option>
</select>
<label>省</lable>
<select id="city">
<option>-请选择市-</option>
</select>
<label>市</lable>
</td>
<td id="addresswarn" class="warn"></td>
</tr>

<!--密码-->
<tr>
<td>密码:</td>
<td><input type="text" value="请输入你的密码" class="center" id="password" name="password"></td>
<td id="passwordwarn" class="warn"></td>
</tr>

<!--再次确认密码-->
<tr>
<td>确认密码:</td>
<td><input type="text" value="请确认你的密码" class="center" id="password2"></td>
<td id="password2warn" class="warn"></td>
</tr>

<!--按钮-->
<tr>
<td><input type="reset" value="清除重置" id="reset"></td>
<td><input type="button" value="注册" id="submit"></td>
<td><input type="button" value="other"></td>
</tr>

</table>
</form>

<script type="text/javascript" src="logininterface.js"></script>  <!--原版DOM-->
<!--<script src="jquery-3.3.1.min.js"></script>-->    <!--jQuery版（jQuery官网下载）-->
<!--<script type="text/javascript" src="logininterface2.js"></script>-->    <!--jQuery版-->
</body>
</html>

logininterface.css

/*注册界面的css*/
.center {  /*标签内容居中*/
	text-align:center; 
}

.tablecenter {    /*表格*/ 
	text-align:center;
	margin: 0 auto;
}

tr {
	height:50px;
}

.warn {  /*警告*/
	color:red;
}

logininterface.js（原版使用DOM，没用到jQuery库）

/*注册界面的js*/

/*name界面*/
var namewarn=false;
var nameEle=document.getElementById("name");
var nameWarnEle=document.getElementById("namewarn");
namepattern=/^[\u4E00-\u9FA5]{2,4}$/;   /*name的正则模板*/
nameEle.onfocus=function(ev){  /*获取焦点*/
	if (nameEle.value=="请输入你的姓名"){
		this.value="";
	}
}
nameEle.onblur=function(ev) {  /*失去焦点*/
	if (nameEle.value==""){
		this.value="请输入你的姓名";
	}
	if (!namepattern.test(nameEle.value)){nameWarnEle.innerHTML="名字输入错误";};  /*失去焦点进行内容判断*/
	if (namepattern.test(nameEle.value)){nameWarnEle.innerHTML="";namewarn=true;};
}

/*性别界面*/
var genderwarn=false;
var femaleEle=document.getElementById("female");
var maleEle=document.getElementById("male");
var genderWarnEle=document.getElementById("genderwarn");
femaleEle.onchange=function(ev){
	genderwarn=true;
}
maleEle.onchange=function(ev){
	genderwarn=true;
}


/*邮箱界面*/
var emailwarn=false;
var emailEle=document.getElementById("email");
var emailWarnEle=document.getElementById("emailwarn");
emailpattern=/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;  /*email的正则模板*/
emailEle.onfocus=function(ev){    /*获取焦点*/
	if (emailEle.value=="请输入你的邮箱"){
		this.value="";
	}
}
emailEle.onblur=function(ev) {    /*失去焦点*/
	if (emailEle.value==""){
		this.value="请输入你的邮箱";
	}
	if(!emailpattern.test(emailEle.value)){emailWarnEle.innerHTML="邮箱格式错误";};    /*失去焦点进行内容判断*/
	if(emailpattern.test(emailEle.value)){emailWarnEle.innerHTML="";emailwarn=true;};
}


/*手机号界面*/
var phonewarn=false;
var phoneEle=document.getElementById("phone");
var phoneWarnEle=document.getElementById("phonewarn");
phonepattern=/^1[3589]\d{9}$/;  /*phone的正则模板*/  
phoneEle.onfocus=function(ev){      /*获取焦点*/
	if (phoneEle.value=="请输入你的手机号"){
		this.value="";
	}
}
phoneEle.onblur=function(ev) {    /*失去焦点*/
	if (phoneEle.value==""){
		this.value="请输入你的手机号";
	}
	if(!phonepattern.test(phoneEle.value)){phoneWarnEle.innerHTML="手机号码输入错误";};   /*失去焦点进行内容判断*/
	if(phonepattern.test(phoneEle.value)){phoneWarnEle.innerHTML="";phonewarn=true;};
}

/*地址界面*/
var addresswarn=false;
var provinceEle=document.getElementById("province");
var cityEle=document.getElementById("city");
var addressWarnEle=document.getElementById("addresswarn");
var data={
	"广东":["广州市","佛山市","湛江市","清远市","河源市"],
	"福建":["泉州市","福州市","厦门市","漳州市","龙岩市"],
	"浙江":["杭州市","宁波市","金华市","绍兴市","温州市"],
};
for (var i in data){
	var tmp = document.createElement("option");
	tmp.innerText=i;
	provinceEle.appendChild(tmp);
}
provinceEle.onchange = function (ev){
	addresswarn=true;
	cityEle.innerHTML="";
	var cityArray=data[this.value];
	for (var j in cityArray){
		var tmp=document.createElement("option");
		tmp.innerText=cityArray[j];
		cityEle.appendChild(tmp);
	}
}


/*密码界面*/
var password1warn=false;
var pawd;   
var passwordEle=document.getElementById("password");
var passwordWarnEle=document.getElementById("passwordwarn");
passwordpattern=/^[a-zA-Z0-9]{6,12}$/;  /*password的正则模板*/ 
passwordEle.onfocus=function(ev){	/*获取焦点*/
	passwordEle.setAttribute("type","password");  /*开始输入时将密码屏蔽*/
	if (passwordEle.value=="请输入你的密码"){
		this.value="";
	}
}
passwordEle.onblur=function(ev) {    /*失去焦点*/
	if (passwordEle.value==""){
		passwordEle.setAttribute("type","text");   /*没输入时则不将密码屏蔽*/
		this.value="请输入你的密码";
	}
	if(!passwordpattern.test(passwordEle.value)){passwordWarnEle.innerHTML="至少输入6至12个字符";};   /*失去焦点进行内容判断*/
	if(passwordpattern.test(passwordEle.value)){passwordWarnEle.innerHTML="";password1warn=true;};
	pawd=passwordEle.value;   /*记录密码，用于后面确认密码*/
}


/*确认密码界面*/
var password2warn=false;
var password2Ele=document.getElementById("password2");
var password2WarnEle=document.getElementById("password2warn");
password2Ele.onfocus=function(ev){     /*获取焦点*/
    password2Ele.setAttribute("type","password");  /*开始输入时将密码屏蔽*/
	if (password2Ele.value=="请确认你的密码"){
		this.value="";
	}
}
password2Ele.onblur=function(ev) {   /*失去焦点*/
	if (password2Ele.value==""){
		password2Ele.setAttribute("type","text");   /*没输入时则不将密码屏蔽*/
		this.value="请确认你的密码";
	}
	if(pawd!=password2Ele.value){password2WarnEle.innerHTML="两次输入的密码不匹配";};   /*失去焦点进行内容判断*/
	if(pawd==password2Ele.value){password2WarnEle.innerHTML="";password2warn=true;};
}

/*清除重置按钮*/
var resetEle=document.getElementById("reset");   //获取清除重置按钮的节点
resetEle.onclick=function(ev){
	passwordEle.setAttribute("type","text");   //清除重置后取消密码输入框的屏蔽
	password2Ele.setAttribute("type","text");
}

/*注册按钮*/
var submitEle=document.getElementById("submit");  //获取注册按钮的节点
submitEle.onclick=function(ev){
	/*对地址进行判断*/
	if (!addresswarn){  
		addressWarnEle.innerHTML="请选择地址";
	}
	if (addresswarn) {
		addressWarnEle.innerHTML="";
	}
	/*对性别进行判断*/
	if (!genderwarn){
		genderWarnEle.innerHTML="请选择性别";
	}
	if (genderwarn){
		genderWarnEle.innerHTML="";
	}
	/*对所有的输入进行判断*/
	if (namewarn&&genderwarn&&emailwarn&&phonewarn&&addresswarn&&password1warn&&password2warn){
		submitEle.setAttribute("type","submit");
	}
}

使用jquery库的注册界面的效果：
1.未输入或输入框为空时会有默认值提示输入信息
2.输入框获取焦点时时会清空默认值
3.输入不符合要求时会有警告提示（即时校验）
4.全部信息未输入正确时无法注册提交
5.地址选择时，选择省份后会有该省份相应的市提供选择

采用jQuery库的与原版采用DOM在js代码上有所改进：
logininterface2.js（采用jQuery库）（html，css差别不大，参考上面)

/*Jquery注册界面的js*/

/*name界面*/
var namewarn=false;
namepattern=/^[\u4E00-\u9FA5]{2,4}$/;   /*name的正则模板*/
$("#name").focus(function (ev){  /*输入框获取焦点*/
	if ($(this).val() == "请输入你的姓名"){
		$(this).val("");
	}
})
$("#name").blur(function (ev){   /*输入框失去焦点*/
	if ($(this).val() == ""){
		$(this).val("请输入你的姓名");
	}
})
$("#name").on("input",function(ev){    /*校验*/
	if (!namepattern.test($(this).val())){$("#namewarn").html("名字输入错误");};
	if (namepattern.test($(this).val())){$("#namewarn").html("");namewarn=true;};
})

/*性别界面*/
var genderwarn=false;
$("#male").change(function(ev){
	genderwarn=true;
})
$("#female").change(function(ev){
	genderwarn=true;
})

/*邮箱界面*/
var emailwarn=false;
emailpattern=/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;  /*email的正则模板*/
$("#email").focus(function (ev){
	if ($(this).val() == "请输入你的邮箱"){
		$(this).val("");
	}
})
$("#email").blur(function (ev){   /*输入框失去焦点*/
	if ($(this).val() == ""){
		$(this).val("请输入你的邮箱");
	}
})
$("#email").on("input",function(ev){    /*校验*/
	if (!emailpattern.test($(this).val())){$("#emailwarn").html("邮箱输入错误");};
	if (emailpattern.test($(this).val())){$("#emailwarn").html("");emailwarn=true;};
})

/*手机号界面*/
var phonewarn=false;
phonepattern=/^1[3589]\d{9}$/;  /*phone的正则模板*/ 
$("#phone").focus(function (ev){
	if ($(this).val() == "请输入你的手机号"){
		$(this).val("");
	}
})
$("#phone").blur(function (ev){   /*输入框失去焦点*/
	if ($(this).val() == ""){
		$(this).val("请输入你的手机号");
	}
})
$("#phone").on("input",function(ev){    /*校验*/
	if (!phonepattern.test($(this).val())){$("#phonewarn").html("邮箱输入错误");};
	if (phonepattern.test($(this).val())){$("#phonewarn").html("");phonewarn=true;};
})

/*地址界面*/
var addresswarn=false;
var addressWarnEle=document.getElementById("addresswarn");
var data={
	"广东":["广州市","佛山市","湛江市","清远市","河源市"],
	"福建":["泉州市","福州市","厦门市","漳州市","龙岩市"],
	"浙江":["杭州市","宁波市","金华市","绍兴市","温州市"],
};
for (var i in data){
	var tmp = document.createElement("option");
	$(tmp).text(i);
	$("#province").append(tmp)
}
$("#province").change(function(ev){
	addresswarn=true;
	$("#city").html("");
	var cityArray=data[$(this).val()];
	for (var j in cityArray){
		var tmp=document.createElement("option");
		$(tmp).text(cityArray[j]);
		$("#city").append(tmp);
	}
})

/*密码界面*/
var password1warn=false;
passwordpattern=/^[a-zA-Z0-9]{6,12}$/;  /*password的正则模板*/ 
$("#password").focus(function (ev){
	$("#password").attr("type","password");
	if ($(this).val() == "请输入你的密码"){
		$(this).val("");
	}
})
$("#password").blur(function (ev){   /*输入框失去焦点*/
	if ($(this).val() == ""){
		$("#password").attr("type","text");
		$(this).val("请输入你的密码");
	}
})
$("#password").on("input",function(ev){    /*校验*/
	if (!passwordpattern.test($(this).val())){$("#passwordwarn").html("密码输入错误");};
	if (passwordpattern.test($(this).val())){$("#passwordwarn").html("");password1warn=true;};
})

/*确认密码界面*/
var password2warn=false;
$("#password2").focus(function (ev){
	$("#password2").attr("type","password");
	if ($(this).val() == "请确认你的密码"){
		$(this).val("");
	}
})
$("#password2").blur(function (ev){   /*输入框失去焦点*/
	if ($(this).val() == ""){
		$("#password2").attr("type","text");
		$(this).val("请确认你的密码");
	}
})
$("#password2").on("input",function(ev){    /*校验*/
	if ($(this).val()!=$("#password").val()){$("#password2warn").html("两次输入的密码不匹配");};
	if ($(this).val()==$("#password").val()){$("#password2warn").html("");password2warn=true;};
})

/*清除重置按钮*/
var resetEle=document.getElementById("reset");   //清除重置按钮
$("#reset").click(function(ev){
	$("#password").attr("type","text");
	$("#password2").attr("type","text");
	for (var n=0;n<$(".warn").length;n++){   //清除警告
		$($(".warn")[n]).html("");
	}
})

/*注册按钮*/
$("#submit").click(function(ev){
	/*对地址进行判断*/
	if (!addresswarn){  
		$("#addresswarn").html("请选择地址");
	}
	if (addresswarn) {
		$("#addresswarn").html("");
	}
	/*对性别进行判断*/
	if (!genderwarn){
		$("#genderwarn").html("请选择性别");
	}
	if (genderwarn){
		$("#genderwarn").html("");
	}
	/*对所有的输入进行判断*/
	if (namewarn&&genderwarn&&emailwarn&&phonewarn&&addresswarn&&password1warn&&password2warn){
		$("#submit").attr("type","submit");
	}
})

本人初学者，部分方法使用不佳，还希望多多指教。
END！

小小城序员

关注关注

28
点赞
踩
143

收藏

觉得还不错? 一键收藏
0
评论
html+css+javaScript实现一个简单的注册界面

html+css+js实现一个简单的注册界面自学html，css，js也有一小段时间了，尝试着做点东西来巩固一下，就决定实现这个简单的注册界面。实现的注册界面很普通，没有加上华丽的装饰，但能实现基本的注册界面应有的效果。注册界面的效果：1.未输入或输入框为空时会有默认值提示输入信息2.输入框获取焦点时时会清空默认值3.输入不符合要求时会有警告提示4.全部信息未输入正确时无法注册提交5.地址选择时，选择省份后会有该省份相应的市提供选择注册界面：附上代码：（代码里有详细的注释）logini
复制链接

扫一扫