要求
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>
Jquery实现检测用户输入用户名和密码不能为空
原文地址:https://www.cnblogs.com/Kingfan1993/p/9813089.html