（肆）JS表单校验（鼠标聚焦和失去焦点判断）

最新推荐文章于 2022-11-24 11:39:33 发布

Cherry_King

最新推荐文章于 2022-11-24 11:39:33 发布

阅读量2.8k

点赞数

分类专栏： JS&JQuery 文章标签： JS JavaScript

本文链接：https://blog.csdn.net/Cherry_King/article/details/100112413

版权

JS&JQuery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

0.技术分析

		校验用户名
			1. 当用户鼠标移动到输入框中时候, 请给用户一个提示
				事件: 焦点事件 onfocus
				触发函数
				函数里面要做一些事情
					span 给用户提示信息
			2. 当用户鼠标移开时候, 校验一下用户输入
				事件: 失去焦点  onblur
				触发函数
				函数要干事情:
					校验用户输入
					得到用户输入的值
			3. 当用户按键输入抬起的时候, 校验一下用户输入
			4. 使用：`onblur="函数名"`

Demo：

用户名:<input type="text" id="username" onfocus="showTips('span_username','用户名长度不能小于6')" onblur="checkUsername()" onkeyup="checkUsername()" /><span id="span_username"></span><br />

onfocus="showTips('span_username','用户名长度不能小于6')"实现：

			function showTips(spanID,msg){
				//首先要获得要操作元素 span
				var span = document.getElementById(spanID);
				span.innerHTML = msg;
			}

onblur="checkUsername()"和onkeyup="checkUsername()"实现：

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>";
					return false;
				}else{
					span.innerHTML = "<font color='red' size='2'>恭喜您,可用</font>";
					return true;
				}
			}

1.源码Index.jsp


<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--
			引入外部的js文件
		-->
		<script type="text/javascript" src="../js/regutils.js" ></script>
		<script>
			/*
				1. 确定事件 : onfocus
				2. 事件要驱动函数
				3. 函数要干一些事情: 修改span的内容
			*/
			function showTips(spanID,msg){
				//首先要获得要操作元素 span
				var span = document.getElementById(spanID);
				span.innerHTML = msg;
			}
			/*
				校验用户名:
				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>";
					return false;
				}else{
					span.innerHTML = "<font color='red' size='2'>恭喜您,可用</font>";
					return true;
				}
			}
			
			/*
			 密码校验
			 */
			function checkPassword(){
				//获取密码输入
				var uPass = document.getElementById("password").value;
				
				var span = document.getElementById("span_password");
				
				//对密码输入进行校验
				if(uPass.length < 6){
					span.innerHTML = "<font color='red' size='2'>对不起,太短</font>";
					return false;
				}else{
					span.innerHTML = "<font color='red' size='2'>恭喜您,够用</font>";
					return true;
				}
			}
			
			/*
			 确认密码校验
			 * */
			function checkRePassword(){
				//获取密码输入
				var uPass = document.getElementById("password").value;
				
				//获取确认密码输入
				var uRePass = document.getElementById("repassword").value;
				
				
				var span = document.getElementById("span_repassword");
				
				//对密码输入进行校验
				if(uPass != uRePass){
					span.innerHTML = "<font color='red' size='2'>对不起,两次密码不一致</font>";
					return false;
				}else{
					span.innerHTML = "";
					return true;
				}
			}
			
			/*
			 校验邮箱
			 * */
			function checkMail(){
				var umail = document.getElementById("email").value;
				
				var flag = checkEmail(umail);
				
				var span = document.getElementById("span_email");
				//对邮箱输入进行校验
				if(flag){
					span.innerHTML = "<font color='red' size='2'>恭喜您,可用</font>";
					return true;
				}else{
					span.innerHTML = "<font color='red' size='2'>对不起,邮箱格式貌似有问题</font>";
					return false;
				}
			}
			
			function checkForm(){
				var flag = checkUsername() && checkPassword() && checkRePassword() && checkMail();
				return flag;
			}
			
		</script>
	</head>
	<body>
		<form action="../01-自动轮播图片/图片自动轮播.html" onsubmit="return checkForm()" >
			用户名:<input type="text" id="username" onfocus="showTips('span_username','用户名长度不能小于6')" onblur="checkUsername()" onkeyup="checkUsername()" /><span id="span_username"></span><br />
			密码:<input type="password" id="password" onfocus="showTips('span_password','密码长度不能小于6')" onblur="checkPassword()" onkeyup="checkPassword()"/><span id="span_password"></span><br />
			确认密码:<input type="password" id="repassword" onfocus="showTips('span_repassword','两次密码必须一致')" onblur="checkRePassword()" onkeyup="checkRePassword()" /><span id="span_repassword"></span><br />
			邮箱:<input type="text" id="email" onfocus="showTips('span_email','邮箱格式必须正确')" onblur="checkMail()" /><span id="span_email"></span><br />
			手机号:<input type="text" id="text" /><br />
			
			<input type="submit" value="提交" />
		</form>
	</body>
</html>

2.展示效果

在这里插入图片描述

Cherry_King

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
（肆）JS表单校验（鼠标聚焦和失去焦点判断）

1. onfocus：当用户鼠标移动到输入框中时候, 请给用户一个提示。2. onblur：当用户鼠标移开时候, 校验一下用户输入。3. onkeyup：当用户按键输入抬起的时候, 校验一下用户输入。
复制链接

扫一扫

专栏目录