在系统登录页面,我们常常会用JS去进行校验用户名、密码等信息是否为空的操作,一般就是在校验的文本框中添加id属性,在script标签中申明函数,然后去关联事件,起到一个触发的效果,最后在函数中进行判断条件的书写。逻辑没有多大问题,但是一个细节不到位,就达不到我们理想的效果。比如明明在页面判断条件一旦满足(为空条件)就会有弹窗【警告弹窗】,按理浏览器就会阻止事件继续触发,但却继续跳转了…
其实,原因可能有很多种,对于非专业前端的同志们来说,找这种bug还是有点困难,我们是在浏览器Debug(其实这种方式还是不错的,我现在也这样在用),还是各种神操作,总之解决完事大吉,废话不多说,说重点!
return fasle :表示阻止浏览器对事件的默认处理,默认一般是true,即不管是否满足用户期望的响应信息,触发onclick事件后,就会执行提交表单的动作。这样的结果对于我们操作者来说,不理想,也不科学!所以我们需要手动的设置return false,即在不满足响应条件时,页面能给予响应的提示信息,这样才更人性化!
代码示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录页面</title>
<script type="text/javascript">
<!--当我们单击submit按钮时,默认提交表单,取消默认行为,手动返回 return false;-->
window.onload=function(){
var btnSubEle = document.getElementById("btnSub");
btnSubEle.onclick =function(){
var usernameValue = document.getElementById("username").value;
if(usernameValue == "" || usernameValue == null ){
alert("用户名不能为空,请重新输入!");
return false;
}
var passwordValue = document.getElementById("password").value;
if(passwordValue =="" || passwordValue == null ){
alert("密码不能为空,请重新输入!");
return false;
}
}
}
</script>
</head>
<body>
<div align="center">
<h4>登录界面</h4>
<form action="success.html" >
<table>
<tr>
<td>用户名:</td>
<td><input type="text" name="username" id="username" ></td>
</tr>
<tr>
<td>密 码:</td>
<td><input type="password" name="password" id="password"></td>
</tr>
<tr align="center">
<td colspan="2">
<input type="reset" value="重置">  
<input id="btnSub" type="submit" value="登录">
</td>
</table>
</form>
</div>
</body>
</html>
页面效果:
简单的登录页面,用户名和密码,这里只是一个简单的案例,对JS的常规练习。
警告弹窗(两种):
若有return false;则点击“”确定“”按钮,则不会出现跳转,即浏览器已阻止事件的触发。
A.如果用户名为空,密码为空或者不为空,弹窗信息为“用户名不能为空,请重新输入!”。
B.如果用户名不为空,密码为空,则弹窗信息“密码不能为空,请重新输入!”。
如果用户名、密码不为空,则成功跳转!(这里不涉及数据库)
☝上述分享来源个人总结,如果分享对您有帮忙,希望您积极转载;如果您有不同的见解,希望您积极留言,让我们一起探讨,您的鼓励将是我前进道路上一份助力,非常感谢!我会不定时更新相关技术动态,同时我也会不断完善自己,提升技术,希望与君同成长同进步!
☞本人博客:https://coding0110lin.blog.csdn.net/ 欢迎转载,一起技术交流吧!