使用javascript实现表单校验(聚焦onfocus()和离焦onblur()以及在指定位置输出innerHTML='')

最新推荐文章于 2022-06-30 19:50:06 发布
最新推荐文章于 2022-06-30 19:50:06 发布
阅读量1.1k 收藏 4
点赞数
分类专栏： Callback
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40332952/article/details/104235611
版权
使用javascript实现表单校验

技术分析
确定需要的事件为onfocus()聚焦事件和onblur()离焦事件
在指定的位置输出提示信息,就要innerHTML=‘提示信息’

代码步骤

  1. 首先确定事件onfocus()聚焦事件,并为其绑定一个函数
  2. 书写绑定的函数
  3. 在确定离焦事件onbulr()离焦事件,并未其绑定一个函数
  4. 书写这个绑定的函数

表单校验代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#fater{
				border:1px solid red;
				width:1320px;
				height:680px;
				margin:auto;
			}
			#son_one{
				border:1px solid blue;
				width:1320px;
				height:40px;
			}
			#son_tow{
				border:1px solid black;
				width:1320px;
				height:40px;
			}
			#son_three{
				border:1px solid black;
				width:1320px;
				height:595px;
				margin:auto;
			}
			.title{
				border:1px solid green;
				width:438px;
				height:40px;
				float:left;
			}
			#son_three_1{
				border:1px solid black;
				width:500px;
				height:500px;
				margin-top:50px;
				
			}
			#son_one_3{
				padding-top:8px;
				height:32px;
			}
			ul li{
				/*元素内联*/
				display:inline;
				color:white;
			}
			a {
				/*去除超链接下划线*/
				text-decoration:none;
			}
		</style>
		<script>
			//表单校验代码实现
			//因为表单有很多文本框需要校验,所以这段代码不是很通用,所以要改进代码。
			//聚焦代码时实现
			/*function showTips(){
				//在指定位置输出内容
				document.getElementById("usernamespan").innerHTML="<font color='gray'>用户名必填!</font>";
			}*/
			//离焦代码实现
			/*function showTips2(){
			 //获取用户名框的值
			 var username = document.getElementById("username").value;
			 if(username==""){
			 	document.getElementById("usernamespan").innerHTML="<font color='red'>用户名不能为空!</font>"
			 }else{
			 	//如果用户名有内容,要把之前用户名必填的内容要清除掉,如果不清除,就会出现用户名有还出现了用户名必填。
			 	document.getElementById("usernamespan").innerHTML=""
			 }
			}*/
			
			//表单校验代码改进
			//分析,几乎代码全部都是一样的,就是id和输出的文字的内容不一致。
			//聚焦代码改进
			function showTips(id,info){
				document.getElementById(id+"span").innerHTML="<font color='gray'>"+info+"</font>"
			}
			//离焦代码改进
			function checkText(id,info){
				var val = document.getElementById(id).value;
				//判断内容是否为空
				if(val==""){
					//为空
					//为空提示填写内容
					document.getElementById(id+"span").innerHTML="<font color='red'>"+info+"</font>"
				}else{
					//不为空
					if(id!="emalie"){
					//如果文本框不为空,就要把之前的提示要清空。
					document.getElementById(id+"span").innerHTML=""
					}else{
						//这里是为邮箱专门加了是否符合邮箱格式的判断
						if(!/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(val)){
							document.getElementById(id+"span").innerHTML="<font color='red'>邮箱格式不正确!</font>"
						}
						
					}
				}
			}
			
		</script>
	</head>
	<body>
		<div id="fater">
			 <div id="son_one">
			 	<div class="title">
			 		<img src="../img/logo2.png" width="300px" height="30px"/>
			 	</div>
			 	<div class="title" align="center">
			 		<img src="../img/header.png" width="300px" height="40px" />
			 	</div>	
			 	<div id="son_one_3" class="title" align="center">
			 		<a href="#">登录</a>&nbsp;&nbsp;
			 		<a href="#">注册</a>&nbsp;&nbsp;
			 		<a href="#">购物车</a>&nbsp;&nbsp;
			 	</div>
			 </div>
			 <div id="son_tow" style="background-color:black;">
			 	<ul>
			 		<a href="#"><li>首页</li></a>
			 		<a href="#"><li>手机数码</li></a>
			 		<a href="#"><li>电脑办公</li></a>
			 		<a href="#"><li>鞋靴箱包</li></a>
			 		<a href="#"><li>家用电器</li></a>
			 	</ul>
			 </div>
			 <div id="son_three" style="background-image: url(../img/regist_bg.jpg);" align="center">
			 	<div id="son_three_1" style="background-color:white;">
			 		<table border="1px" width="100%" height="100%" cellspacing="0px">
			 			<tr>
			 				<td colspan="2" height="40px">
			 					<strong>会员注册 USER REGISTER</strong>
			 				</td>
			 				<!--<td width="70%"></td>-->
			 			</tr>
			 			<tr>
			 				<td width="30%" height="40px" align="center">用户名:</td>
			 				<td width="70%" height="40px" align="left">
			 					<input id="username" type="text" onfocus="showTips('username','用户必填!')" onblur="checkText('username','用户名不能为空!')"/>
			 					<span id="usernamespan"></span>
			 				</td>
			 			</tr>
			 			<tr>
			 				<td width="30%" height="40px" align="center">密码:</td>
			 				<td width="70%" height="40px">
			 					<input id="password" type="text" onfocus="showTips('password','密码必填!')" onblur="checkText('password','密码名不能为空!')"/>
			 					<span id="passwordspan"></span>
			 				</td>
			 			</tr>
			 			<tr>
			 				<td width="30%" height="40px" align="center">确认密码:</td>
			 				<td width="70%" height="40px">
			 					<input id="repassword" type="text" onfocus="showTips('repassword','确认密码必填!')" onblur="checkText('repassword','确认密码名不能为空!')"/>
			 					<span id="repasswordspan"></span>
			 				</td>
			 			</tr>
			 			<tr>
			 				<td width="30%" height="40px" align="center">姓名</td>
			 				<td width="70%" height="40px">
			 					<input id="name" type="text" onfocus="showTips('name','姓名必填!')" onblur="checkText('name','姓名不能为空!')"/>
			 					<span id="namespan"></span>
			 				</td>
			 			</tr>
			 			<tr>
			 				<td width="30%" height="40px" align="center">Emalie</td>
			 				<td width="70%" height="40px">
			 					<input id="emalie" type="text" onfocus="showTips('emalie','Emalie必填!')" onblur="checkText('emalie','邮箱地址不能为空!')"/>
			 					<span id="emaliespan"></span>
			 				</td>
			 			</tr>
			 			<tr>
			 				<td width="30%" height="40px" align="center">性别</td>
			 				<td width="70%" height="40px">
			 					<input type="radio" name="sex" checked="checked"/>男
			 					<input type="radio" name="sex"/>女
			 				</td>
			 			</tr>
			 			<tr>
			 				<td width="30%" height="40px" align="center">出生日期</td>
			 				<td width="70%" height="40px">
			 					<input id="birthday" type="text" onfocus="showTips('birthday','Emalie必填!')" onblur="checkText('birthday','出生日期不能为空!')"/>
			 					<span id="birthdayspan"></span>
			 				</td>
			 			</tr>
			 			<tr>
			 				<td width="30%" height="40px" align="center">验证码</td>
			 				<td width="70%" height="40px">
			 					<input id="code" type="text" onfocus="showTips('code','验证码必填!')" onblur="checkText('code','验证码不能为空!')"/>
			 					<span id="codespan"></span>
			 				</td>
			 			</tr>
			 			<tr>
			 				<td width="30%" height="40px" colspan="2" align="center">
			 					<input type="button" value="提交注册"/>
			 				</td>
			 				<!--<td width="70%" height="40px"></td>-->
			 			</tr>
			 		</table>
			 	</div>
			 </div>
		</div>
	</body>
</html>

页面效果展示
完整的表单校验,这里我单读为邮箱进一步做了邮箱格式的判断

ginger_mr
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
innerHTML()和innerText(),实现文本框换行
tsqjxy的博客
07-14 2118
innerHTML指的是从对象的起始位置到终止位置的全部内容,包括Html标签。 innerText 指的是从起始位置到终止位置的内容,但它去除Html标签。 同时，innerHTML 是所有浏览器都支持的，innerText 是IE浏览器和chrome 浏览器支持的，Firefox浏览器不支持。其实，innerHTML 是W3C 组织规定的属性；而innerText 属性是IE浏览器自己的属性，不过后来的浏览器部分实现这个属性罢了。...
JavaScript实现表单验证后的聚焦
AC_greener的博客
11-11 636
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <form name="myform" onsubmit="return judge()" > <!-- 调用这个函数 --> <label>username: <input id
在网页的指定位置输出
hxj277的专栏
03-13 453
先设置再在代码中写入protected System.Web.UI.HtmlControls.HtmlTableCell test;test.InnerHtml="你要输出的内容"; 
js中的focus（）聚焦
weixin_30701575的博客
12-11 1386
document.getElementById("vin").focus();document.form1.name.focus() $(document).ready(function(){ document.getElementById("carnum").focus(); }); 转载于:https://www.cnblogs.com/baijin05/p/504...
js 聚焦事件 focus blur input 节流 键盘事件 keydown keyup 防抖 滚轮事件
蒲公英芽的博客
01-07 5528
FocusEvent事件 主要针对所有表单元素和超链接，当 input 聚焦时触发 focus 事件，失去焦点时触发 blue 事件。 focus 获得焦距 blue 失去焦距 事件对象中 relatedTarget 为上一个失焦对象 <input type="text" name="text" id="user"> <script> var user=documen...
详解HTML onfocus获得焦点和onblur失去焦点事件
09-22
<input type="text" id="fname" onfocus="setStyle(this.id)"> ``` 另一方面，`onblur`事件则在元素失去焦点时触发。这通常发生在用户将焦点移出当前元素，转而关注页面上的其他部分。`onblur`常用于进行实时的表单...
Js中的onblur和onfocus事件应用介绍
10-26
在网页开发中，理解并有效地利用`onfocus`和`onblur`事件是提高用户交互性和表单验证的关键技能。它们不仅可以用于文本输入框，还可以应用于其他可获取焦点的元素，如下拉列表、复选框、单选按钮等。通过结合其他...
JavaScript的onfocus与onblur用法
06-05
JavaScript是Web开发中不可或缺的一部分，尤其在处理用户交互时，事件监听器如`onfocus`和`onblur`起着至关重要的作用。这两个事件主要应用于表单元素，但也可以用于任何可聚焦的HTML元素，例如按钮、链接或文本...
OnFocus与OnBlur的例子区别
09-05
这两个事件主要应用于表单元素，如`<input>`，以实现特定的交互效果和验证功能。 `OnFocus` 事件是在一个元素获得焦点时触发的，例如当用户点击或通过键盘导航到该元素时。在给定的例子中，`onfocus` 属性被用来...
【JavaScript源代码】JavaScript onblur与onfocus事件详解.docx
12-28
onfocus和onblur事件是JavaScript中用于处理用户交互的重要工具，它们允许开发者在用户与网页元素交互时执行特定的逻辑，提高用户体验并确保数据的有效性。无论是自动选中文本，还是实时验证输入，这两个事件都提供...
JS表单验证 聚焦 离焦 input（onfocus onblur）
qq_41566772的博客
10-30 4517
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script&gt; function showTips(id, info) { document.getElementById(
JavaScript --- > 表单focus,blur,change事件的实现
栗子好好吃的博客
03-02 1421
假设有一个文本框，我们只允许用户输入数值。为此，我们希望: 1.利用focus事件修改文本框内容， 2.利用blur事件回复文本框的内容, 3.利用change事件在用户输入了非数值字符时再次修改背景颜色。 var EventUtil = { addHandler: function(element, type, handler) { // 跨浏览器的添加事件方法 if (...
js表单验证
mosquito1101的专栏
02-15 1109
<br /><br />附加：js 验证radio 是否选择<br /><script language="javascript"><br /> function checkform(obj)<br /> {<br /> for(i=0;i<obj.oo.length;i++)<br />           if(obj.oo[i].checked==true) return true;<br />alert("请选择")<br /> return false;        <br />
JS的onblur
思维小刀
10-12 3518
目的：onblur 属性在元素失去焦点时触发 代码：一离开input就进行大写输入字符串 <!DOCTYPE html> <html> <head> <script> function upperCase() { var x=document.getElementById("fname").value document.getElementBy...
JS中onblur总结
qq_30359369的博客
08-05 7195
JS中onblur总结 #第一种方式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="text"id="...
JavaScript之表单校验
qq_41628448的博客
03-04 196
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单校验</title> <style> .error{ color: red; } &...
JS（DOM-事件机制）
qq_48108860的博客
03-12 877
事件三要素 1、事件源：触发事件的对象 ，如按钮对象 2、事件类型：如何触发？触发什么事件？如鼠标点击，键盘按下等 3、事件处理程序：函数 执行事件的步骤 1、获取事件源 2、注册事件（绑定事件） 3、采用函数赋值形式添加事件处理程序 绑定事件 1、向HTML元素中添加事件 1）onclick='alert(1)' 2）onclick='test()' function test(){ //不能写在window.onload=function(){}中，否则会找不到t...
JS-绑定事件3种方法
SYQ15544423296的博客
06-30 8342
JS-绑定事件3种方法
javascript中 onfocus和onblur失效
最新发布
04-04
5. JavaScript代码错误：如果JavaScript代码包含语法错误或逻辑错误，可能会导致onfocus和onblur事件失效。确保代码没有错误，并且逻辑正确。 如果您无法确定为什么onfocus和onblur事件失效，请检查浏览器控制台中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值