要求
1、用户名和密码为空点击登录时提示相应的提示
2、获取用户名输入框时，错误提示清除
思路
1、创建1个input-text标签和1个input-password标签，1个input-botton标签
2、把按钮绑定点击时间，然后检查所有输入框内容是否为空，为空则加上提示
3、把输入框绑定事件，获取焦点时清除提示
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--设置用户名输入框-->
<label >用户名
<input id="t1" class=‘info‘ type="text">
<!--空span标签用来后面绑定事件添加提示-->
<span></span>
</label>
<hr>
<!--设置密码输入框-->
<label >密码
<input id="t2" class="info" type="password">
<!--空span标签用来后面绑定事件添加提示-->
<span></span>
</label>
<hr>
<label id="b1">
<input type="button" value="登录">
</label>
<script src="JQ.js"></script>
<script>
// 按钮绑定点击事件
$(‘#b1‘).click(function () {
let $name=$(‘#t1‘);
let $pwd=$(‘#t2‘);
// 按钮点击后检查输入框是否为空，为空则找到span便签添加提示
if ($name.val().length===0)
{
$name.next().text(‘用户名不能为空‘)
}
if($pwd.val().length===0)
{
$pwd.next().text(‘密码不能为空‘)
}
});
// 给输入框添加时间，获取焦点时,将span标签中的内容设置成空
$(‘.info‘).focus(function () {
$(this).next().text(‘‘);
})
</script>
</body>
</html>原文地址：https://www.cnblogs.com/Kingfan1993/p/9813089.html
时间： 2024-11-03 13:09:55