前端速成：双月Java之旅（week4）_day1

最新推荐文章于 2024-10-17 19:11:48 发布

若凡໌້ᮨ

最新推荐文章于 2024-10-17 19:11:48 发布

阅读量155

点赞数

文章标签： java 前端 servlet

本文链接：https://blog.csdn.net/weixin_53673193/article/details/126031519

版权

今天学习的是另一种形式的表单校验，即在当前页面输入时或者输入后进行的提示，相较于之前的点击提交按钮之后弹出提示，这种提示方法无疑更常用。

要实现这种效果，我们首先进行技术分析。

我们要是实现的效果有两个，第一个是鼠标点击输入框时在框后面提示输入规范，第二个是输入后鼠标点击别处时判断输入的内容是否符合，并根据判断分别进行不同的提示。具体显示效果如下图所示。

接着是代码分析，HTML整体框架中，我们需要构建一个输入框，并且在输入框后面保留一段空白空间便于稍后的提示信息，大概内容就是<input type="text" id="username"><span id="span_username"></span>。避免页面过于单调可以适当添加其他元素。

这里需要注意的是，需要操作的元素都需要使用id便于后期JS函数操作。我们需要了解的还有onfocus和onblur,onfocus是当鼠标点击指定内容时自动进行的操作，同理onblur就是鼠标移开点击别处时自动运行的操作。需要将这两个操作放置在<input>中并分别建立两个函数。

首先建立的函数需要在鼠标点击是弹出提示，我们将其命名为showTips，则有代码<input οnfοcus="showTips()">，而在<script>中建立的函数，我们首先需要定义一个变量根据<span>的id来对其进行操作，然后修改变量的innerHTML属性达到提示的作用。

然后我们需要建立另一个函数，这个函数要求能够读取到输入的值，然后对值进行判断，最终根据判断结果输出提示。首先是<input οnfοcus="checkUsername()">，使用var定义变量username获取输入的内容，然后根据内容的长度username.length是否大于6来判断，并分别修改<span>的innerHtml。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function showTips(){
				var span = document.getElementById("span_username");
				span.innerHTML = "<font color='red' size='1'>请输入六位以上数字</font>";
			}
			function checkUsername(){
				var uValue = document.getElementById("username").value;
				var span = document.getElementById("span_username");
				if(uValue.length < 6){
					span.innerHTML = "用户名太短";
				}
				else{
					span.innerHTML = "用户名可用";
				}
			}
		</script>
	</head>
	<body>
		<form action="index.html">
			用户名：<input type="text" id="username" onfocus="showTips()" onblur="checkUsername()" /><span id="span_username"></span><br>
			密码：<input type="password" id="password"/><br>
			确认密码：<input type="password" id="repassword"/><br>
			邮箱：<input type="email" id="email"/><br>
			手机号：<input type="tel" id="tel"/><br>
			<input type="submit" value="提交"/>
			
			
			
		</form>
	</body>
</html>