JavaScript_表单校验_js校验手机号-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43801116/article/details/102710214

本文详细介绍了JavaScript中常见的事件，如onfocus、onblur和onkeyup，并通过具体实例展示了如何使用这些事件进行表单验证，包括用户名和密码的实时校验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

技术分析

1.html中的innerHTML属性
2.js中常用事件
	1）onfocus事件：获得焦点事件
	2）onblur事件：失去焦点
	3）onkeyup:按键抬起事件

代码块

	<html>
		<head>
			<meta charset="UTF-8>
			<title></title>
			<script>
				/*
					1.确认事件：onfocus
					2.事件要驱动函数
					3.函数要做的一些事情：修改span的内容
				*/
				function showTips(spanID,msg){
					//首先要活的要操作元素 span
					var span=document.getElementById("sapn_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='blue'size='2'>用户名可用</font>"
					}
				
				}
				/*
					密码校验
				*/
			</script>
		</head>
		<body>
			<form action="......html">
			用户名：<input type="text" id="username"  onfocus="showTips()" onblur="checkUsername()" onkeyuo="checkUsername()"/><span id="span_username"></span></br>
			密码：<input type="text" id="username" onfocus="showTips"/></br>
			确认密码：<input type="text" id="reusername"/></br>
			邮箱：<input type="text" id="email"/></br>
			手机号：<input type="text" id="phone"></br>
	
		<input type="submit" value="提交"/>
		</body>
	</html>