JS如何校验表单用户名、密码是否为空，"return false;"语句又有什么作用？

最新推荐文章于 2024-08-20 14:05:28 发布

CRUD_CODER_LIN

最新推荐文章于 2024-08-20 14:05:28 发布

阅读量4.9k

点赞数 6

分类专栏： JavaSE&JavaWeb

本文链接：https://blog.csdn.net/linhong_1994/article/details/99007105

版权

JavaSE&JavaWeb 专栏收录该内容

43 篇文章 1 订阅

订阅专栏

在系统登录页面，我们常常会用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>密&emsp;码:</td>
			<td><input type="password" name="password" id="password"></td>
		</tr>
		<tr align="center">
			<td colspan="2">
				<input type="reset" value="重置">&emsp;&emsp;
				<input id="btnSub" type="submit" value="登录">
			</td>
		
	</table>
	</form>
</div>
</body>
</html>

页面效果：
简单的登录页面，用户名和密码，这里只是一个简单的案例，对JS的常规练习。
在这里插入图片描述
警告弹窗（两种）：
若有return false;则点击“”确定“”按钮，则不会出现跳转，即浏览器已阻止事件的触发。
A.如果用户名为空，密码为空或者不为空，弹窗信息为“用户名不能为空，请重新输入！”。
B.如果用户名不为空，密码为空，则弹窗信息“密码不能为空，请重新输入！”。