原生js实现表单验证

最新推荐文章于 2022-09-16 17:09:33 发布
最新推荐文章于 2022-09-16 17:09:33 发布
阅读量584 收藏 1
点赞数
分类专栏： 前端 文章标签： html html5 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45776185/article/details/120038884
版权 
本文使用原生js实现表单验证，完成的功能如下：

 1. 鼠标触碰到表单时，表单会变大
 2. 当输入信息完毕，表单失去焦点时，会有正确或错误的信息提示
 3. 当按下回车键时，光标自动移至下一行

文章目录

一、表单验证效果展示

1.开始界面

开始界面

2.错误提示界面

在这里插入图片描述

3.正确提示界面

在这里插入图片描述

二、具体代码实现


<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>表单验证</title>
	<style>
		* {
			box-sizing: border-box;
		}

		h1,
		h2,
		h3,
		h4,
		h5,
		h6,
		ul,
		ol,
		dl,
		li,
		dt,
		dd,
		tr,
		th,
		p,
		span,
		a,
		input {
			padding: 0;
			margin: 0;
		}

		input::-webkit-input-placeholder {
			color: #999;
		}

		li {
			list-style: none;
		}

		body {
			background-color: #f9fafb;
		}

		.box {
			width: 400px;
			height: 555px;
			margin: 73px auto;
			background-color: #fff;
			box-shadow: 5px 3px 8px 10px rgba(0, 0, 0, .1);
			transition: all .2s;
		}

		.box:hover{
			transform: scale(1.01);
		}

		.content {
			width: 320px;
			margin: auto;
		}

		.regis_hd {
			height: 88px;
			width: 100%;
			text-align: center;
		}

		.regis_hd h2 {
			width: 100%;
			height: 100%;
			padding-top: 35px;
			padding-bottom: 20px;
		}

		.content ul li {
			width: 100%;
			height: 93px;
		}

		.content ul li p {
			height: 22px;
			width: 100%;
			color: #777;
			margin-bottom: 5px;
		}

		.content ul li input {
			width: 100%;
			height: 41px;
			line-height: 41px;
			border: 2px solid #f0f0f0;
			text-indent: 10px;
			border-radius: 5px;
			font-size: 14px;
		}

		.btn {
			width: 100%;
			height: 43px;
			line-height: 43px;
			margin-top: 20px;
			border: none;
			outline: none;
			border-radius: 5px;
			background-color: #3498DB;
			text-align: center;
			color: #fff;
			font-size: 16px;
			cursor: pointer;
		}

		.content ul li .extra {
			height: 18px;
			width: 100%;
			line-height: 18px;
			font-size: 13px;
			color: #e74c3c;
		}

		.content ul li .change {
			height: 18px;
			width: 100%;
			line-height: 18px;
			font-size: 13px;
			color: #2ecc71;
		}
	</style>
	<script>
		window.addEventListener('load', function () {
			var username = document.querySelectorAll('li')[0].querySelector('input');
			var email = document.querySelectorAll('li')[1].querySelector('input');
			var password = document.querySelectorAll('li')[2].querySelector('input');
			var confirm = document.querySelectorAll('li')[3].querySelector('input');
			var usernameVal = '';
			var emailVal = '';
			var pwdVal = '';
			var confirmVal = '';
			var btn = document.querySelector('.btn');
			username.addEventListener(
				'blur', function () {
					usernameVal = username.value;
					if (usernameVal.length < 3) {
						username.style.borderColor = '#e74c3c';
						document.querySelectorAll('li')[0].querySelector('.extra').innerHTML = '<img src="images/wrong.png" style="vertical-align:middle"> Username must be at least 3 characters';
					} else {
						username.style.borderColor = '#2ecc71';
						username.style.backgroundColor = 'rgb(232, 240, 254)';
						document.querySelectorAll('li')[0].querySelector('.extra').innerHTML = '<img src="images/right.png" style="vertical-align:middle"> Checked';
						document.querySelectorAll('li')[0].querySelector('.extra').className = 'change';
					}
				}
			)
			username.addEventListener('keyup', function (e) {
				if (e.keyCode == 13) {
					username.blur();
					email.focus();
				}
			})

			email.addEventListener('blur', function () {
				emailVal = email.value;
				var pattern = /^([A-Za-z0-9_\-\.\u4e00-\u9fa5])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
				if (!pattern.test(emailVal)) {
					email.style.borderColor = '#e74c3c';
					document.querySelectorAll('li')[1].querySelector('.extra').innerHTML = '<img src="images/wrong.png" style="vertical-align:middle"> Email is not valid';
				} else {
					email.style.borderColor = '#2ecc71';
					email.style.backgroundColor = 'rgb(232, 240, 254)';
					document.querySelectorAll('li')[1].querySelector('.extra').innerHTML = '<img src="images/right.png" style="vertical-align:middle"> Checked';
					document.querySelectorAll('li')[1].querySelector('.extra').className = 'change';
				}
			})
			email.addEventListener('keyup', function (e) {
				if (e.keyCode == 13) {
					email.blur();
					password.focus();
				}
			})
			password.addEventListener('blur', function () {
				pwdVal = password.value;
				if (pwdVal.length < 6) {
					password.style.borderColor = '#e74c3c';
					document.querySelectorAll('li')[2].querySelector('.extra').innerHTML = '<img src="images/wrong.png" style="vertical-align:middle"> Password must be at least 6 characters';
				} else {
					password.style.borderColor = '#2ecc71';
					password.style.backgroundColor = 'rgb(232, 240, 254)';
					document.querySelectorAll('li')[2].querySelector('.extra').innerHTML = '<img src="images/right.png" style="vertical-align:middle"> Checked';
					document.querySelectorAll('li')[2].querySelector('.extra').className = 'change';
				}
			})
			password.addEventListener('keyup', function (e) {
				if (e.keyCode == 13) {
					password.blur();
					confirm.focus();
				}
			})
			confirm.addEventListener('blur', function () {
				confirmVal = confirm.value;
				if (confirmVal != pwdVal | (pwdVal.length < 6)) {
					confirm.style.borderColor = '#e74c3c';
					document.querySelectorAll('li')[3].querySelector('.extra').innerHTML = '<img src="images/wrong.png" style="vertical-align:middle"> Password do not correspond';
				} else {
					confirm.style.borderColor = '#2ecc71';
					confirm.style.backgroundColor = 'rgb(232, 240, 254)';
					document.querySelectorAll('li')[3].querySelector('.extra').innerHTML = '<img src="images/right.png" style="vertical-align:middle"> Checked';
					document.querySelectorAll('li')[3].querySelector('.extra').className = 'change';
				}
			})
			confirm.addEventListener('keyup', function (e) {
				if (e.keyCode == 13) {
					confirm.blur();
					btn.click();
				}
			})
			btn.addEventListener('click', function () {
				username.blur();
				email.blur();
				password.blur();
				confirm.blur();
			})
		})
	</script>
</head>

<body>
	<div class="box">
		<div class="content">
			<div class="regis_hd">
				<h2>Register With Us</h2>
			</div>
			<ul>
				<li>
					<p>Username</p>
					<input type="text" placeholder="Enter username" autocomplete="on">
					<p class="extra"></p>
				</li>
				<li>
					<p>Email</p>
					<input type="email" placeholder="Enter email" autocomplete="on">
					<p class="extra"></p>
				</li>
				<li>
					<p>Password</p>
					<input type="password" placeholder="Enter password" autocomplete="on">
					<p class="extra"></p>
				</li>
				<li>
					<p>Confirm Password</p>
					<input type="password" placeholder="Enter password again" autocomplete="on">
					<p class="extra"></p>
				</li>
			</ul>
			<input type="submit" value="Submit" class="btn">
		</div>
	</div>
</body>

</html>
ALuckyA
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
原生JS实现表单验证（基于正则表达式）
m0_70274918的博客
04-29 572
在静态表单的基础上，我们想一下要做的效果 我们想实现的效果： 1. 实现单击获取验证码时的倒计时效果😄 2. 通过正则表达式判断输入的姓名和电话号是否符合规范🙋 3. 如果符合规范会在后面打绿色的对号，不符合规范会在输入框里提示红色的提示字样🐶 4. 当姓名或手机号有不符合规范的时候点击提交会弹出不正确的提示框，二者都符合规范时点击提交弹出提交成功对话框💣 我们一个一个效果来完成，先看一下倒计时效果： 首先我们点击获取验证码这里，会立刻进入一个三秒钟的倒计时，然后里面的文字变成了倒计时秒数，并且在进入倒计
js-实现原生表单提交验证.zip
07-11
原生js表单提交验证代码下载。原生JavaScript实现，适合新手学习js。用户填写完成后，点击提交按钮，判断填写的信息是否符合要求，如不符合将弹出相应的修改信息要求，引导用户正确填写表单。
原生js实现表单验证（提交后验证）
08-29
在平常的页面当中，我们经常用到表单和表单验证，表单验证是数据进入数据库前一次在客户机利用脚本检查数据类型的行为。作为一个初学者，在这里贴下我的菜鸟代码。
JS原生表单的验证
迁就100
07-16 912
知识点: onsumbit事件:表示表单提交是否成功 返回值true:成功 false,提交不成功 有关正则表达式的看这篇论文：点开这个链接 有关各类事件的使用看这篇论文：点开这个链接 onblur事件：用于表单验证 关于表单验证，分为这几步 首先zaibody中写好你想要验证的内容，比如用户名，密码，email，并且设置span标签id和input标签id 其次开始你的验证，一步一步来，每个...
原生js —— 表单验证
我的博客
09-02 1635
表单验证示例 知识点： ① form标签的action属性为提交地址，method属性为提交方式，取值有get和post。若想禁止点击type=submit//button按钮后提交表单内容，可通过form对象.onsubmit=function（）{return false}/对象.onsubmit="return false;""来禁止。默认是return true的。故默认是直接提交的。 ...
原生JS实现表单验证带提示留言功能特效源码.zip
11-10
原生JS实现表单验证带提示留言功能特效源码.zip 原生JS实现表单验证带提示留言功能特效源码.zip 原生JS实现表单验证带提示留言功能特效源码.zip
《原生javascript表单验证实例教程》源码
04-02
本文件属于文章《原生javascript表单验证实例教程》的完整代码，在读完原创文章之后可以下载查看代码。代码中有详细的注释说明。html、css、js代码都在同一个文件中。也可以供有需要的朋友在开发中直接使用。
原生js的表单认证
weixin_57219176的博客
09-16 266
原生js的表单验证
原生js综合表单验证
mcyhero的博客
06-06 706
要求： 1、使用失去焦点事件完成表单验证 每一项验证失去焦点时都可以即时验证 2、姓名： 单词字符组成 6--10为 ，不能用数字开头 年龄： 只能由数字组成 年龄不能为负数 密码：6--18位字符组成 有密码强弱验证 3、确认密码和密码相同 4、手机号： 15 13 18 开头 5、qq ： 5--12...
基于原生js的from表单验证插件
05-01
这是一个基于原生js的from表单验证插件，里面保护了js逻辑运算的使用和模块化探测
原生JS经典小项目-form表单校验
05-18
原生JS经典小项目-form表单校验
js表单验证（简单）
11-07
js表单验证（简单）
原生js实现获取form表单数据代码实例
01-19
本文实例为大家分享了原生js实现获取form表单数据的具体代码，供大家参考，具体内容如下 //获取指定form中的所有的<input>对象 function getElements(formId) { var form = document.getElementById(formId); var elements = new Array(); var tagElements = form.getElementsByTagName('input'); for (var j = 0; j < tagElements.length; j++){ elements.push
原生js--表单
weixin_33877092的博客
02-13 111
阅读了《javascript权威指南》P396-P409。 一、表单和表单元素的选取 1、选取表单（包含name=“address”属性的form表单） 　　document.querySelectorAll( form[name="address"] ) // ES5标准接口。低版本浏览器未实现 　　window.address // 不可靠，不要使用 　　document.addre...
JS DOM编程笔记 - 原生表单（二四）
小帅的编程笔记
11-09 423
今天我们来学习 JavaScript 表单 API：访问表单、获取元素的值、验证表单数据和提交表单。 基础表单 在 HTML 中创建表单，使用 <form> 元素： <form action="/signup" method="post" id="signup"> </form> <form> 元素有两个重要的属性：action 和 method。 action 指定处理表单提交的 URL。 method 指定用于提交表单的 HTTP 方法。是 po
前端页面使用原生js提交get或post请求表单
alan_liuyue的博客
04-29 7792
前言 前端界面一般都可直接在html定义form表单，然后提交表单，使用jquery提交get或者post请求； 然而有种需求就是在不使用jquery的前提下，用原生js提交get或post请求； 实践 原生js一般请求url方式： window.location.href = "url"; 原生js提交get或post请求表单： var url = path + '/test/te...
原生JS关于表单的增删查
FormAda的博客
05-23 855
一、增添元素在增添元素的时候，我们可以考虑到节点的方式来增添：1.创建一个新的元素2.输入新建元素的内容3.向已有元素追加新元素有了这三点之后呢你便可以增添一个新元素了，快试试吧！e.g：     ...
注册 原生js验证 博客园
最新发布
05-16
注册原生js验证博客园可以通过以下步骤实现： 1. 首先需要在博客园注册页面添加表单元素，用于用户输入信息，包括用户名、密码等。 2. 接下来需要编写JavaScript代码来验证用户输入的信息。可以通过正则表达式等方式对输入数据进行格式验证，确保数据合法性。例如，可以使用手机号码正则表达式验证手机号码的格式是否正确。 3. 在表单提交前，需要使用JavaScript代码阻止表单提交，并通过Ajax方式将用户输入的数据发送到后端进行验证。后端可以通过验证用户名和密码的正确性来确定用户是否可以注册账户。 4. 如果用户输入的信息格式正确且后端验证通过，则可以让表单提交，否则需要给出相应的提示信息，告知用户哪些信息格式不正确或者已经被注册过。 5. 在用户注册成功后，需要将用户的信息保存到数据库，并让用户跳转到登录页面，进行登录操作。 总之，注册原生js验证博客园需要前端开发人员编写JavaScript代码来验证用户输入数据，并结合后端进行账户验证和保存。通过以上步骤可以实现一个基本的注册系统。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值