表单校验

最新推荐文章于 2023-11-26 16:30:52 发布

云飞扬°

最新推荐文章于 2023-11-26 16:30:52 发布

阅读量571

点赞数

分类专栏： JavaScript 文章标签：表单校验

本文链接：https://blog.csdn.net/weixin_44706512/article/details/90259467

版权

JavaScript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

表单校验

表单校验中常用的事件:

获得焦点事件: onfocus

失去焦点事件 onblur

按键抬起事件: onkeyup

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	<script>
		/*
		 * 1.确定事件：onfocus
		 * 2.事件要驱动函数
		 * 3.函数要干一些事情：修改span的内容
		 */
		function showTips(){
			//首先要获得要操作的元素span
			var span = document.getElementById("span_username");
			span.innerHTML ="<font color='red' size='2'>用户名长度不能小于6位</font>";
		}
			
		/*
		 * 校验用户名
		 * 1.事件:onblur  失去焦点
		 * 2.函数：checkUsername()
		 * 3.函数去显示校验结果
		 */
		function checkUsername(){
			//获取用户输入的内容
			var uValue = document.getElementById("username").value;
			//对输入的内容进行校验
			//获得要显示结果的span
			var span = document.getElementById("span_username");
			//显示校验结果
			if(uValue.length<6){
				span.innerHTML="<font color='red' size='2'>×，用户名太短</font>";
			}else{
				span.innerHTML="<font color='green' size='2'>√，用户名可用</font>";
			}	
		}
		
	</script>		
	</head>
	
	<body>
		<form action="../01-自动轮播图片/图片自动轮播.html" >
			用户名：<input type="text" id="username" onfocus="showTips()" onblur="checkUsername()" onkeyup="checkUsername()" /><span id="span_username"></span><br />
			密码：<input type="password" id="password" /><span id="span_username"></span><br />
			确认密码：<input type="password" id="repassword" /><br />
			邮箱：<input type="text" id="email" /><br /> <!--如果采用type="email"则会自动校验-->
		        手机号：<input type="text" id="text"/><br />
		    <input type="submit" value="提交" />
			
		</form>
	</body>
</html>

云飞扬°

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
表单校验

表单校验表单校验中常用的事件:获得焦点事件: onfocus失去焦点事件 onblur按键抬起事件: onkeyup<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script> /*...
复制链接

扫一扫

专栏目录