Html+CSS+JS 实现升级版的注册表单

最新推荐文章于 2023-05-11 21:37:54 发布

程序员阿莱

最新推荐文章于 2023-05-11 21:37:54 发布

阅读量2.3k

点赞数 7

文章标签： css html html5

本文链接：https://blog.csdn.net/mohen110/article/details/120353678

版权

预览:

闪闪发光的边框 CSS:

选中文本框时，显示边框为自定义颜色 JS：

上次呢,做了一个简单的注册表单,Html+CSS实现简单的注册表单_mohen110的博客-CSDN博客

这次我们对他进行一个升级.

上预览.

预览:

这blingbling的框,又没有一种发光二极管的感觉, 上代码.

闪闪发光的边框 CSS:

以label为例, input是一个道理,其实很简单

只需要给边框添加一种颜色，在给边框添加同种颜色的阴影即可。

border-color:边框颜色

box-shadow:阴影

label {
    display: inline-block;
/*    color:aliceblue;*/
	border-color:#F0953B;
	box-shadow: 0 0 15px #F0953B;
    text-align: right;
    width: 100px;
    height: 28px;
    padding-right: 10px;
    /*    margin: 5px;*/
}

预览：

选中文本框时，显示边框为自定义颜色 JS：

这一部分呢主要是用js实现的，js的代码直接写在了html文件里，内联

首先获取每个文本框的id，(可自行给每个文本框进行命名)

然后添加焦点事件，当我们点击文本框的时候，利用函数更改外框的颜色

<script type="text/javascript">
		
		//选中的文本框高亮
  		usernameobj=document.getElementById('username');
  		passwordobj=document.getElementById('password');
		regionobj=document.getElementById('region');
  		phoneobj=document.getElementById('phone');
		emailobj=document.getElementById('email');
  		
		
  		usernameobj.onfocus=function(){
 	 		this.style.outlineColor='#F0953B';
  		}
  		passwordobj.onfocus=function(){
 	 		this.style.outlineColor='#F0953B';
  		}
		regionobj.onfocus=function(){
 	 		this.style.outlineColor='#F0953B';
  		}
  		phoneobj.onfocus=function(){
 	 		this.style.outlineColor='#F0953B';
  		}
		emailobj.onfocus=function(){
 	 		this.style.outlineColor='#F0953B';
  		}
	</script>

预览：

对文本框的输入进行校验 JS:

此处包含了对邮箱、密码和手机的验证。每个函数的结构大体相同。

先定义正则表达式，

再判断文本框获取的内容是否符合要求，

如果符合，则显示正确，

不符合，显示错误，并用弹窗进行提示。

	<script type="text/javascript">

		//函数1：验证邮箱格式
  	function validate_email(email){
  		//定义正则表达式的变量:邮箱正则
  		var emailReg=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
  		//console.log(username);
  		if(email !="" && email.search(emailReg) != -1)
  		{
  			document.getElementById("email").innerHTML = "<font color='green' size='3px'>√邮箱格式正确</font>";
			
  		}else{
  			document.getElementById("email").innerHTML = "<font color='red' size='3px'>邮箱格式错误</font>";
			alert("邮箱格式错误！")
  		}
  	}

//函数2：验证密码是否符合要求：匹配6位密码，由数字和字母组成：
  	function validate_password(password){
  		//^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6-10}$
		//测试密码：12345y
  		var passwordReg=/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6}$/;
  		if(password != "" && password.search(passwordReg) != -1)
  		{
  			document.getElementById("test_password").innerHTML = "<font color='green' size='3px'>√密码格式正确</font>";
			
  		}else{
  			document.getElementById("test_password").innerHTML = "<font color='red' size='3px'>密码格式错误</font>";
  			alert("密码有6位，由数字和字母组成!");
  		}
  	}

	//函数3： 验证手机
	function validate_phone(phone){
  		//^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6-10}$
		//测试密码：12345y
  		var phoneReg=/^[1][3,4,5,6,7,8,9][0-9]{9}$/;
  		if(phone != "" && phone.search(phoneReg) != -1)
  		{
  			document.getElementById("test_phone").innerHTML = "<font color='green' size='3px'>√手机格式正确</font>";
			
  		}else{
  			document.getElementById("test_phone").innerHTML = "<font color='red' size='3px'>手机格式错误</font>";
  			alert("请输入正确的手机格式!");
  		}
  	}
		
	</script>

1. 想要调用以上函数需要再每个文本框中利用<onblur>进行串联，

当鼠标离开输入框是执行函数

onblur：失去焦点事件，用户离开输入框时执行

2. 在每个<input>后用<div>设定了另一个id

函数中 getElementByld() 指定id名称的标签为显示容器，若直接用<input>id是不对的

需要用<div>,在文本框后显示。

<label>密码：</label>
<input type="password" placeholder="6位密码由数字和字母组成" id="password" onblur="validate_password(this.value)"> 
<div id="test_password"></div><br/>

<label>手机：</label>
<input type="tel" placeholder="请输入手机号..." id="phone" 
onBlur="validate_phone(this.value)">
<div id="test_phone"></div><br/>

<label>Email：</label>
<input type="email" placeholder="请输入Email地址..." id="email" onblur="validate_email(this.value)">
<div id="test_email"></div><br/>

预览：

最后，我们可以添上背景图片：

由于我用的是黑色图片，所以将标签和标题的字体颜色改为了白色

只需要在对应的CSS中添加 color: aliceblue; 即可

<div id="Layer1" style="position:absolute; width:100%; height:130%; background-color: snow; z-index:-1"  >

<img src="1577435709324.jpg"  width="100%"/>

预览：

到这里就大功告成啦！！！

完整代码

Html:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>程序员阿菜</title>
	<link rel="stylesheet" href="style.css">
</head>

<body>
	<div id="Layer1" style="position:absolute; width:100%; height:130%; background-color: snow; z-index:-1"  >
<!-- 	<img src="1577435709324.jpg" alt=""/>-->
	<img src="1577435709324.jpg"  width="100%"/>
 </div>

	<div class="reg_div">
		<div class="h_title"><h3>程序猿注册表单</h3></div>
   		<div class="h_hr"></div>
		<form action="" method="get">
<!--		onblur失去焦点事件，用户离开输入框时执行 JavaScript 代码-->
		<label>账号：</label><input type="text" placeholder="请输入账号..." id="username"><br/>
		<label>密码：</label><input type="password" placeholder="6位密码由数字和字母组成" id="password" onblur="validate_password(this.value)"> <div id="test_password"></div><br/>
		<label>国家/地区：</label><input type="text" placeholder="请选择国家/地区" id="region" list="regList"><br/>
		<datalist id="regList">
			<option value="cn">中国</option>
			<option value="hk">中国香港</option>
			<option value="mc">中国澳门</option>
		</datalist>
		<label>手机：</label><input type="tel" placeholder="请输入手机号..." id="phone" onBlur="validate_phone(this.value)"><div id="test_phone"></div><br/>
		<label>Email：</label><input type="email" placeholder="请输入Email地址..." id="email" onblur="validate_email(this.value)"><div id="test_email"></div><br/>
		<div class="submit_btn">注册</div>
		<div class="reset_btn">重置</div>
		
	</form>	
	</div>
		
</body>
	
    <script type="text/javascript">
		
		//选中的文本框高亮
  		usernameobj=document.getElementById('username');
  		passwordobj=document.getElementById('password');
		regionobj=document.getElementById('region');
  		phoneobj=document.getElementById('phone');
		emailobj=document.getElementById('email');
  		
		
  		usernameobj.onfocus=function(){
 	 		this.style.outlineColor='#F0953B';
  		}
  		passwordobj.onfocus=function(){
 	 		this.style.outlineColor='#F0953B';
  		}
		regionobj.onfocus=function(){
 	 		this.style.outlineColor='#F0953B';
  		}
  		phoneobj.onfocus=function(){
 	 		this.style.outlineColor='#F0953B';
  		}
		emailobj.onfocus=function(){
 	 		this.style.outlineColor='#F0953B';
  		}
		
		
		//函数1：验证邮箱格式
  	function validate_email(email){
  		//定义正则表达式的变量:邮箱正则
  		var emailReg=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
  		//console.log(username);
  		if(email !="" && email.search(emailReg) != -1)
  		{
  			document.getElementById("email").innerHTML = "<font color='green' size='3px'>√邮箱格式正确</font>";
			
  		}else{
  			document.getElementById("email").innerHTML = "<font color='red' size='3px'>邮箱格式错误</font>";
			alert("邮箱格式错误！")
  		}
  	}
		
	//函数2：验证密码是否符合要求：匹配6位密码，由数字和字母组成：
  	function validate_password(password){
  		//^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6-10}$
		//测试密码：12345y
  		var passwordReg=/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6}$/;
  		if(password != "" && password.search(passwordReg) != -1)
  		{
  			document.getElementById("test_password").innerHTML = "<font color='green' size='3px'>√密码格式正确</font>";
			
  		}else{
  			document.getElementById("test_password").innerHTML = "<font color='red' size='3px'>密码格式错误</font>";
  			alert("密码有6位，由数字和字母组成!");
  		}
  	}
	//函数3： 验证手机
	function validate_phone(phone){
  		//^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6-10}$
		//测试密码：12345y
  		var phoneReg=/^[1][3,4,5,6,7,8,9][0-9]{9}$/;
  		if(phone != "" && phone.search(phoneReg) != -1)
  		{
  			document.getElementById("test_phone").innerHTML = "<font color='green' size='3px'>√手机格式正确</font>";
			
  		}else{
  			document.getElementById("test_phone").innerHTML = "<font color='red' size='3px'>手机格式错误</font>";
  			alert("请输入正确的手机格式!");
  		}
  	}
		
	</script>
</html>

css:

@charset "utf-8";
/* CSS Document */
.submit_btn {
    display: inline-block;
    width: 100px;
    height: 28px;
    line-height: 28px;
    font-size: 14px;
    border: 1px #006600 solid;
    text-align: center;
    border-radius: 3px; /*圆角*/
    background: #89CDEF;
    margin-top: 20px;
    margin-left: 60px;
    /*	color:#FFF;*/
}
.submit_btn:hover {
    background: #8BEFC1;
    cursor: default;
}
.reset_btn {
    display: inline-block;
    width: 100px;
    height: 28px;
    line-height: 28px;
    font-size: 14px;
    border: 1px #006600 solid;
    text-align: center;
    border-radius: 3px; /*圆角*/
    background: #89CDEF;
    margin-top: 20px;
    margin-left: 60px;
    /*	color:#FFF;*/
}
.reset_btn:hover {
    background: #8BEFC1;
    cursor: default;
}


.reg_div {
    width: 620px;
    margin: auto;
}
.h_title {
    text-align: center;
	color: aliceblue;
}
.h_hr {
    height: 2px;
    background: #0CF;
    margin-bottom: 15px;
}

form {
    text-align: center;
}
label {
    display: inline-block;
    color:aliceblue;
/*	background: #F0953B;*/
	border-color:#F0953B;
	box-shadow: 0 0 15px #F0953B;
    text-align: right;
    width: 100px;
    height: 28px;
    padding-right: 10px;
    /*    margin: 5px;*/
}
input {
    width: 180px;
    height: 28px;
    border: #06f 1px solid;
    border-radius: 3px;
    margin-left: 25px;
    margin-top: 5px;
    margin-bottom: 20px;
    border-color: #03a9f4;
    box-shadow: 0 0 15px #03a9f4;
}