JavaScript实现表单验证

最新推荐文章于 2024-04-20 14:59:10 发布
最新推荐文章于 2024-04-20 14:59:10 发布
阅读量1k 收藏 6
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38455564/article/details/81585466
版权

实现效果：

用户进行注册时能够对其输入的信息进行简单验证，逐行验证，若输入信息不符合规范，则在旁边显示错误提示。效果图图如下：（由于没有进行修饰，界面异常丑陋，但主要功能没问题）

实现思路：

1、使用form表单标签用于为用户输入创建 HTML 表单，使用input元素获取用户填写的数据。

2、制定相关的正则表达式，用DOM对象取出用户输入的相关数据与正则表达式进行比较验证。

3、最后用onsubmit和reset事件进行数据提交和重置。

代码展示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<script type="text/javascript">
//		调用方法
		window.onload=function(){
			document.getElementsByName("username")[0].onkeyup=checkUsername;
			document.getElementsByName("password")[0].onkeyup=checkPassword;
			document.getElementsByName("repassword")[0].onkeyup=checkRepassword;
			document.getElementsByName("email")[0].onkeyup=checkEmail;
			document.getElementsByName("phone")[0].onkeyup=checkPhone;
			document.getElementsByName("button1")[0].onsubmit=check;
			
		}
//		校验用户名
		function checkUsername(){
			var reg=/^\w{6,18}$/;
			var username=document.getElementsByName("username")[0].value;
			var span=document.getElementsByName("username")[0].nextSibling;
			if(reg.test(username)){
				span.innerHTML="<img src='image/smallsuccess.gif' />";
				return true;
			}else{
				span.innerHTML="<img src='image/smallfail.gif' />";
				return false;
			}
		}
//		校验密码
		function checkPassword(){
			var reg1=/.{6,12}/;
			var reg2=/[A-Z]+/;
			var reg3=/[a-z]+/;
			var reg4=/[0-9]+/;
			var password=document.getElementsByName("password")[0].value;
			var span=document.getElementsByName("password")[0].nextSibling;
			var reg=reg1.test(password)&&reg2.test(password)&&reg3.test(password)&&reg4.test(password);
			if(reg){
				span.innerHTML="<img src='image/smallsuccess.gif' />";
				return true;
			}else{
				span.innerHTML="<img src='image/smallfail.gif' />";
				return false;
			}
		}
//		校验确认密码
		function checkRepassword(){
			var password=document.getElementsByName("password")[0].value;
			var repassword=document.getElementsByName("repassword")[0].value;
			var span=document.getElementsByName("repassword")[0].nextSibling;
			if(password==repassword){
				span.innerHTML="<img src='image/smallsuccess.gif' />";
				return true;
			}else{
				span.innerHTML="<img src='image/smallfail.gif' />";
				return false;
			}
		}
//		校验邮箱
		function checkEmail(){
			var reg=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
			var email=document.getElementsByName("email")[0].value;
			var span=document.getElementsByName("email")[0].nextSibling;
			if(reg.test(email)){
				span.innerHTML="<img src='image/smallsuccess.gif' />";
				return true;
			}else{
				span.innerHTML="<img src='image/smallfail.gif' />";
				return false;
			}
		}
//		校验电话号码
		function checkPhone(){
			var reg=/^1[0-9]{10}/;
			var phone=document.getElementsByName("phone")[0].value;
			var span=document.getElementsByName("phone")[0].nextSibling;
			if(reg.test(phone)){
				span.innerHTML="<img src='image/smallsuccess.gif' />";
				return true;
			}else{
				span.innerHTML="<img src='image/smallfail.gif' />";
				return false;
			}
		}
		function check(){
			return checkUsername()&&checkPassword()&&checkRepassword()&&checkEmail()&&checkPhone();
		}
	</script>
	<body>
		<form action="#" method="post">
			<table>
				<tr>
					<td>
						1、请输入用户名：
						<input type="text" name="username" autocomplete="off" placeholder="请输入用户名" required="required"/><span></span>
						<p>用户名长度为6-18位，必须为字母或数字或下划线</p>
					</td>
					
				</tr>
				<tr>
					<td>
						2、请 输 入 密 码：
						<input type="password" name="password" placeholder="请输入密码" required="required"/><span></span>
						<p>密码长度为6-12位，至少包含一位大写字母、一位小字母、一位数字</p>
					</td>
				</tr>
				<tr>
					
					<td>
					3、请再次输入密码：
						<input type="password" name="repassword" placeholder="请再次输入密码" required="required"/><span></span>
					</td>
				</tr>
				<tr>
					
					<td>
					4、请选择性别：
						<input type="radio" checked="checked" name="gender" value="male"/>男
						<input type="radio" name="gender" value="female"/>女
					</td>
				</tr>
				<tr>
					<td>
					5、请输入邮箱：
						<input type="email" name="email" placeholder="请输入邮箱"/><span></span>
					</td>
				</tr>
				<tr>
					<td>
					6、请输入手机号码：
						<input type="text" name="phone" placeholder="请输入手机号码"/><span></span>
					</td>
				</tr>
				<tr>
					<td>
						<input type="submit" name="button1" value="提交"/>
						<input type="reset" name="button2" value="重置"/>
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>

 

孔融不吃梨
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript之表单验证
weixin_64938628的博客
03-06 1万+
前言：我们这一次讲的表单验证运用了前面几篇文章说讲的的内容，比之前的要难一些，我会在代码里以注释的形式详细的讲解。 目录 一.简单的表单验证 验证方式一: 验证方式二： 二.正则验证 一.正则的规则 内容 次数 二.正则的注意事项 三.二级联动 一.简单的表单验证 验证方式一: <html> <head> <meta charset="UTF-8"> <title>Title&...
JavaScript 表单验证
笔记
02-03 586
如果不合法，则弹出“无效电子邮件地址”的消息。当用户在表单中输入数据时，脚本会检查输入的内容是否有效，如果无效则提示用户，而不是在服务器端进行检查，这样可以提高用户体验和网站效率。综上所述，JavaScript 表单验证是一种非常有用的技术，它可以在用户输入数据时确保数据的有效性，提高用户体验，并减少服务器的负载。提高用户体验：表单验证可以提高用户体验，因为它可以在用户输入数据之后立即告诉他们是否输入的数据有误，而不是等到服务器端进行检查，这样可以大大提高用户的工作效率。
JavaScript表单验证表单验证
最新发布
zzb_lly的博客
04-20 294
表单验证是JavaScript的高级选项之一.我们可以通过JavaScript在网页中对即将送往服务器的HTML表单中的输入数据进行验证.如果所输入内容与所需不符,我们就在页面中进行提示.这样就使得我们不用频繁的与服务器进行交互,减少了频率,提高了效率.在验证用户名与密码时,我们通常验证用户名与密码不能为空,用户名和密码必须在指定长度范围内,用户名和密码由数字和字母组成(使用正则表达式)等等。验证邮箱时是否为邮箱格式，是否添加@与符合标准的后缀名等。· 验证用户名与密码为指定格式。· 验证单选框所选内容。
JavaScript实现表单验证（包含实例）
Cavewang的博客
09-06 3829
表单验证表单验证意义与场景降低服务器压力提升用户体验表单验证举例界面效果展示 表单验证意义与场景 降低服务器压力 拦截不合格的数据，避免直接提交到服务器，可以显著降低服务器开销 提升用户体验 早期的互联网，表单项都是非常多的，注册个账号，经常需要填写20+个字段。而其中有一个填写不正 确就要等待几十秒时间。如果有了表单验证，反馈是实时的，而且脚本还能把你定位到填写错误的具体 字段。现在虽然无刷新技术早已普及，但是只依赖服务端验证，还是会有几百毫秒的延迟，实际使用会 有一种很难受的粘滞感。 表单验证举例 js
JavaScript的基础表单验证
zcj666999的博客
05-30 850
一般来说绝大多数网站都会有用户注册、用户登录这些基本的功能。 那么用户注册具体是如何实现的呢？ 登录页面 login.jsp 用户登录 JavaSpri校验 登录表单验证 1. 给登录按钮绑定点击事件 2. 获取用户姓名和密码的值 3. 判断姓名是否为空 如果姓名为空，提示用户（span标签赋值...
javascript实现表单验证
10-22
主要介绍了javascript实现表单验证的相关资料，以一个完整的实例对javascript实现表单验证的方法进行分析，感兴趣的小伙伴们可以参考一下
JavaScript实现仿网易通行证表单验证
10-24
主要介绍了JavaScript实现仿网易通行证表单验证，十分的实用，有需要的小伙伴可以参考下。
JavaScript表单验证实现代码
12-10
JavaScript 表单验证 JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。 被 JavaScript 验证的这些典型的表单数据有： 用户是否已填写表单中的必填项目？ 用户输入的邮件地址是否...
javascript html5实现表单验证
10-22
主要为大家详细介绍了javascript html5实现表单验证的具体代码，感兴趣的小伙伴们可以参考一下
JavaScript中的表单验证
ren__wei_的博客
01-10 5682
文章目录1.什么是表单验证2.常见的表单验证 1.什么是表单验证 大多数网站的注册页面中，都会要求用户输入生日，我们知道日期的格式是yyyy-MM-dd并且由数字组成，中间不允许出现字母或是其他符号，如果填写格式与日期格式不符合，name注册将失败，这种操作就是表单验证的体现。 表单验证就是js在数据被送往服务器前，对html表单中的数据进行验证的过程，在验证所有信息均符合要求之后，经表单提交到服务器由服务器进行数据处理。常见的表单验证有：表单中的必填项目、输入的邮件是否合法，输入日期是否合法等。 2.常见
jquery-validate验证框架使用详解及JS文件
12-22
jquery-validate验证框架使用详解及JS文件
JS中：关于form中的Checkbox的操作： document.getElementsByName("name")，如何取消选中状态，如何将文本框内容清空
JMission的专栏
12-19 5887
通过var aa = document.getElementsByName("name")获得的对象是NodeList，不能直接调用aa.value或者aa.checked等其他checkbox的属性，这样会出现undefined的错误。因为每个checkbox的name属性是相同的，所以得到的是一组checkbox标签对象。正确方法是使用for循环遍历每一个标签。 代码举例（功能是取消每个ch
JavaScript表单验证
weixin_54401885的博客
04-04 2663
表单验证： 2种实现方式： 1.利用内置对象string中提供的方法进行实现 2.利用正则表达式（java类似） 利用内置对象string中提供的方法进行实现 1.截取：substr | substring 2.长度：length 3.空格：trim 4.替换：replace 5.分割：split 6....
<Java Web学习初级阶段>JavaScript实现注册页面的表单验证
拂晓弄尘影的博客
09-12 9342
代码实现： 表单验证 //初始化页面 function initform(){ //第一个文本框获取焦点 //document.getElementById("username").focus(); //产生验证码 getCode(); } //产生验证码 function getCode(){ var code = String(Math.round(M
使用JS实现表单验证
热门推荐
星海IT学习之路
07-02 1万+
目录表单页面展示FormCheck.jspCSS样式Register.cssJavaScript代码FormCheck.js 以注册页面为例实现表单验证功能。 表单页面展示 FormCheck.jsp <!DOCTYPE html> < html lang="en"> <head> <meta charset="UTF-8"> <title>注册页面表单校验</title> <link rel="st
《JavaScript 表单及验证》
yexiangCSDN的专栏
07-09 695
JavaScript 表单 JavaScript 表单验证 HTML 表单验证可以通过 JavaScript 来完成。 以下实例代码用于判断表单字段(fname)值是否存在， 如果不存在，就弹出信息，阻止表单提交： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script...
Jquery 实现表单验证，所有验证通过方可提交
吧主
08-03 6959
1. [代码]Jquery 实现表单验证，所有验证通过方可提交              "content-type" content="text/html; charset=utf-8">         Reg                      .state1{                 color:#aaa;             }   

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值