表单验证 JS版

最新推荐文章于 2020-07-27 11:01:25 发布
最新推荐文章于 2020-07-27 11:01:25 发布
阅读量222 收藏
点赞数
分类专栏： H5+CSS3 文章标签： js css3 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fantasy_geek/article/details/105340867
版权

代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>实验</title>
	<style type="text/css">
		*:focus{
			outline:none;/*该元素获得焦点时，不出现虚线框（或高亮框）*/
		}
		form{
			width: 750px;
			height: 500px;
			background-color: #FFC0CB;
			position: absolute;
			left: 30px;
			top: 30px;
			border: 3px solid #9DB5F3 ;
		}
		form ul {
		    width:750px;
		    list-style: none;/*清除默认样式*/
		    padding: 0;
		    margin: 0;
		}
		form li{
		    padding:3px;
		}
		form h1{
			
			text-align: center;
		}
		form span.left{
		    width:100px;
		    margin-top: 3px;
		    margin-left: 30px;
		    display:inline-block;/*把块元素强制转换为行内块元素*/   
		}
		/*给类名为usually的input标签设置背景颜色、背景图片、边框、外阴
		影、内阴影、边框圆角以及内边距的过渡效果*/
		input#usually{
			width: 200px;
			height: 25px;
		    background: #fff url(img/attention.png) no-repeat 98% center;
		    border:1px solid #9DB5F3;
		    box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
		    border-radius:2px;
		    transition: padding .25s;
		}
		/*给类名为usually的input标签设置背景颜色、背景图片、边框、外阴
		影、内阴影、边框圆角以及内边距的过渡效果*/
		input#special{
			width: 200px;
			height: 25px;
		    background: #EBEBE3;
		    border:1px solid #9DB5F3;
		    box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
		    border-radius:2px;
		    transition: padding .25s;
		}
		input#color{
			width: 100px;
			background-color: #EBEBE3;
		}
		li:nth-child(2) input{
			background-color: #EBEBE3;
		}
		li:last-child button:first-child{
			margin-left: 134.5px;
		}
		/*设置按钮样式*/
		button[type^=submit],button[type^=reset] {
			width: 110px;
			height: 30px;
			margin-right: 90px;
		    background-color: #EBEBE3;
		    border: 1px solid #9DB5F3;
		    border-radius: 3px;
		    padding: 6px 20px;/*内边距：上下6px、左右20px*/
		    text-align: center;/*文本对齐方式：水平居中*/		
		}
		
		/*当鼠标悬停在提交按钮时，该按钮背景颜色透明度为85%，光标变成“小手”*/
		button[type^=submit]:hover,button[type^=reset]:hover {
		    opacity:.85;
		    cursor: pointer;
		}
		/*当鼠标点击按钮时，出现1px的#20911e色的实现边框同时出现内阴影*/
		button[type^=submit]:active,button[type^=reset]:active{
			border: 1px solid #9DB5F3;
			box-shadow: 0 0 10px 5px #9DB5F3 inset;
		}
	</style>
</head>
<body>
	<form onsubmit="return check()">
		<ul>
			<li><h1>员工信息登记表</h1></li>
			<li>
				<span class="left">用户登录名：</span>
				<input type="text" name="idname" placeholder="wcz@163.com" id="special">
			</li>
			<li>
				<span class="left">真实姓名：</span>
				<input type="text" name="name" placeholder="王传智" id="usually" class="usually">
				<span id="checktext1">( 必填，只能输入汉字 )</span>
			</li>
			<li>
				<span class="left">真实年龄：</span>
				<input type="number" name="age" placeholder="24" id="usually" class="usually">
				<span id="checktext2">( 必填 )</span>
			</li>
			<li>
				<span class="left">出生日期：</span>
				<input type="date" name="birthday" id="usually" class="usually">
				<span id="checktext3">( 必填 )</span>
			</li>
			<li>
				<span class="left">电子邮箱：</span>
				<input type="text" name="mail" placeholder="123456@126.com" autocomplete id="usually" class="usually">
				<span id="checktext4">( 必填 )</span>
			</li>
			<li>
				<span class="left">身份证号：</span>
				<input type="text" name="idnumber" id="usually" class="usually">
				<span id="checktext5">( 必填，能够以数字、字母x结尾的短身份证号 )</span>
			</li>
			<li>
				<span class="left">手机号码：</span>
				<input type="text" name="phone" id="usually" class="usually">
				<span id="checktext6">( 必填 )</span>
			</li>
			<li>
				<span class="left">幸运颜色：</span>
				<input type="color" name="color" id="color">
				<span>( 请选择你喜欢的颜色 )</span>
			</li>
			<br/>
			<li>
				<button type="submit">提交</button>
				<button type="reset">重置</button>
			</li>
		</ul>
	</form>
	<script>
		var str="请填写此字段。";
		var arr=['必填，只能输入汉字','必填','必填','必填','必填，能够以数字、字母x结尾的短身份证号','必填'];
		function $(id){
			return document.getElementById(id);
		}
		var input=document.getElementsByClassName('usually');
		function checkempty(){
			var flag;
			for(var i=0;i<input.length;++i){
				if (input[i].value=='') {
					$('checktext'+(i+1)).innerHTML=str;
					input[i].style.background = '#fff url(img/warn.png) no-repeat 98% center';
					input[i].style.boxShadow = '0 0 5px #d45252';
					input[i].style.borderColor='#b03535';
					flag=false;
				}
			}
			return flag;
		}
		var f=false,f1=false,f2=false,f3=false,f4=false,f5=false,f6=false;
		for(let i=0;i<input.length;++i){
			input[i].addEventListener('focus', function(e){
				let obj=e.target;
				obj.style.background = '#fff url(img/warn.png) no-repeat 98% center';
				obj.style.boxShadow = '0 0 5px #d45252';
				obj.style.borderColor ='#b03535';
				obj.style.border='1px solid #555';
				obj.style.boxShadow='0 0 3px #aaa';
				obj.style.paddingRight='70px';
			});
			input[i].addEventListener('blur', function(e){
				let obj=e.target;
				obj.style.paddingRight='0px';
			});
			input[i].addEventListener('input', function(e){
				if ($('checktext'+(i+1)).innerHTML=='请填写此字段。') {
					$('checktext'+(i+1)).innerHTML=arr[i];
				}
				let obj=e.target;
				
				if (obj.name=='name') {
					var str=/^([\u4E00-\u9FA5]+(\u2022)?)+$/;
					f1=ismatch(str);
				}
				if(obj.name=='age'){
					if(obj.value>=18&&obj.value<=120){
						obj.style.background = '#fff url(img/right.png) no-repeat 98% center';
						obj.style.boxShadow = '0 0 5px #5cd053';
						obj.style.borderColor='#28921f';
						f2=true;
					}else {
						obj.style.background = '#fff url(img/warn.png) no-repeat 98% center';
						obj.style.boxShadow = '0 0 5px #d45252';
						obj.style.borderColor='#b03535';
						f2=false;
					}
				}
				if(obj.name=='birthday'){
					if(isNaN(obj.value)&&!isNaN(Date.parse(obj.value))){
						obj.style.background = '#fff url(img/right.png) no-repeat 98% center';
						obj.style.boxShadow = '0 0 5px #5cd053';
						obj.style.borderColor='#28921f';
						f3=true;
					}else {
						obj.style.background = '#fff url(img/warn.png) no-repeat 98% center';
						obj.style.boxShadow = '0 0 5px #d45252';
						obj.style.borderColor='#b03535';
						f3=false;
					}
				}
				if (obj.name=='mail') {
					var str=/^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/;
					f4=ismatch(str);
				}
				if (obj.name=='idnumber') {
					var str=/^(\d{15}$|^\d{18}$|^\d{17}(\d|X|x))$/;
					f5=ismatch(str);
				}
				if (obj.name=='phone') {
					var str=/((\d{11})|^((\d{7,8})|(\d{4}|\d{3})-(\d{7,8})|(\d{4}|\d{3})-(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1})|(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1}))$)/;
					f6=ismatch(str);
				}
				function ismatch (str) {
					if(obj.value.match(str)){
						obj.style.background = '#fff url(img/right.png) no-repeat 98% center';
						obj.style.boxShadow = '0 0 5px #5cd053';
						obj.style.borderColor='#28921f';
						return true;
					}else {
						obj.style.background = '#fff url(img/warn.png) no-repeat 98% center';
						obj.style.boxShadow = '0 0 5px #d45252';
						obj.style.borderColor='#b03535';
						return false;
					}
				}
				f=f1&&f2&&f3&&f4&&f5&&f6;
			});	
		}
		function check(){
            checkempty();
            return f;
        }
	</script>
</body>
</html>

效果演示图：
在这里插入图片描述

用HTML写一个身份证
weixin_63622186的博客
11-11 1739
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>个人名片</title> <style> .yuanjiao { width: 500px; height: 300px; background-image: url(img/身份证.jpg); border: 2 solid #000000; .
JavaScript实现仿网易通行证表单验证
10-24
在实现JavaScript表单验证时，以下几点是需要注意的： 1. 必须确保HTML元素的ID标识符正确无误，以便JavaScript能够正确地获取到这些元素。 2. 在编写JavaScript验证逻辑时，需要注意验证规则的顺序和效率，避免...
身份证号验证HTML代码
07-30
输入身份证号，检验号码真实性，验证HTML代码
Button的背景透明度或者颜色的设置
热门推荐
CL
11-29 1万+
(1)一般做法: <!-- 三种设置按钮的背景透明度的方法 --> <!-- android:background="@android:color/transparent" 控件透明--> <!-- android:background="#00000000" 控件透明 00(透明) - ff(不透明) 000000代表的是黑色 --> <!-- Java代码实现
HTML表单（正则表达式验证）
weixin_45750195的博客
02-29 3875
HTML部分 定义了一个9行3列的表格，通过部分行列的合并，然后将表单的input部件嵌入到表格的单元格中，然后设置单元格的宽高来实现表格的对齐。表单部件中使用了H5新增的颜色选择器color、设置日期data、电子邮件email和required等部件，使得输入更规范有效。 <html> <head> <meta charset="utf-8" /> ...
html5的表单系列
u014330950的博客
07-10 612
html5 验证邮箱required是不能为空 验证链接placeholder 验证数字 域 日期 链接跳转: 图片可选多个值: 正则表达式: <input type="text" name="country_code"required="required" pattern="^[0-9]*$" title="Three letter country code" />
JS表单验证会员信息填写代码
04-07
JavaScript（简称JS）是网页开发中用于实现客户端交互的重要脚本语言，特别是在处理表单验证时，它能提供实时、动态的用户输入检查，避免无效或不完整的数据被提交到服务器。本文将深入探讨如何使用JS进行表单验证，...
validate JavaScript版表单验证插件
05-12
`validate`是一个非常流行的JavaScript版表单验证插件，尤其与jQuery库结合使用时，可以方便地创建功能强大的、用户友好的表单验证机制。本篇文章将详细介绍`validate`插件及其在JavaScript和Ajax环境中的应用。 `...
表单验证js
05-09
jquery表单验证 很炫，很漂亮，很实用哦
一个完美的js表单验证案例
10-21
"一个完美的js表单验证案例"利用JavaScript（特别是jQuery库）实现了这一功能，提供了高效、用户友好的验证机制。 JavaScript作为客户端脚本语言，可以直接在用户的浏览器上运行，这使得表单验证可以实时进行，减少...
用html写的表单能进行相应的验证，应用正则表达式
Mr_jianghanlin的博客
04-01 705
html5css3 的表单能进行相应的验证，应用正则表达式 首先话不多说先看看效果图： 在未输入的情况下它会自动检测出错误并提示信息，在输入正确的（输入合法的意思）情况下会给你提示你的输入合法正确，若没有或者忘记填，它也无法提交，并且会提示给你相关的信息下面来看看图片： 下面来看看实现这个实验所需要的重点所要掌握的一些基本属性： 首先是input标签：type属性： 类型 描述 ...
js表单验证
ice_yr的博客
07-27 94
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .one { width: 600px; margin: 100px auto; } .message { display: inline-block; font-size: 1
JavaScript表单验证完美代码
10-20
在讲解JavaScript表单验证的完美代码之前，首先需要了解在前端开发中表单验证的重要性。表单验证是确保用户输入数据的正确性和完整性的重要手段，它能够防止无效或恶意的数据对后端服务器造成损害。JavaScript表单...
GET和POST协议详解
fantasy_geek的博客
04-02 3590
一、GET请求报文分析： 技术分享图片 1、 请求行： a) GET（描述该请求采用了什么请求方法），HTTP协议中包含8种请求方法： GET 请求获取Request-URI 所标识的资源 POST 在Request-URI 所标识的资源后附加新的数据 HEAD 请求获取由Request-URI 所标识的资源的响应消息报头 PUT 请求服务器存储一个资源，并用Requ...
常用的CSS3选择器
fantasy_geek的博客
03-05 3265
常用的CSS选择器 CSS选择器的作用就是从HTML页面中找出特定的某类元素。常用的几类CSS选择器如下表所示。 伪选择器比较特殊，分为伪元素和伪类元素两种。 一、属性选择器 1.E[att^=value]属性选择器 E[att^=value]属性选择器是指选择名称为E的标记，且该标记定义了att属性，att属性值包含前缀为value的子字符串。需要注意的是E是可以省略的，如果省略则表示可以匹配...
HTML5中常用的文本标签
fantasy_geek的博客
03-14 2995
HTML5中常用的文本标签 详解： 一、<wbr>标签 <wbr> 标签的定义 <wbr>标签的定义<wbr>标签是英文单词“Word Break Opportunity”的缩写，表示单词换行时机； <wbr>标签属于单标签，也叫空标签，只书写成<wbr>或<wbr/>皆可，但后者较为规范； <wbr&gt...
CSS3的filter(滤镜)属性详解
fantasy_geek的博客
03-20 2065
1、blur模糊 blur的效果顾名思义就是模糊，单位是px，例如：filter:blur(10px)效果如下，左为原图，右为使用blur的效果图，我非常怀疑今年朋友圈的红包照片微信团队就是这么干的： blur(10px) 当blur(100px)时可以看到图片几乎看不到了 blur(100px) 这个值必须为正值，为负值时没有任何效果，如blur(-100px)： blur(-100px) 2、...
表单H5新增属性和常用标签
fantasy_geek的博客
03-28 927
表单是网页上用来收集用户信息的区域，由文本域、复选框、单选框、菜单、文件址域、按钮等表单元素组成。 <form>标签用于创建一个表单，其基本语法如下所示： <form action="url地址" method="提交方式" name="表单名称"> 各种表单控件 </form> 在上面的语法中，name属性用来区分一个网页中的多个表单；action属性用于...
图文展示网页设计
fantasy_geek的博客
03-20 877
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS3 圆角边框</title> <style> body { padding: 0; background-color: #F7F7F7; } ...
实验一 响应式网站
fantasy_geek的博客
04-14 777
<!DOCTYPE html> <html lang="en"> <head> <title>响应式绿色环保</title> <!-- 自定义主题文件 --> <meta name="viewport" content="width=device-width, initial-scale=1"&g...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值