原生Js表单验证，Js验证表单是否为空，Js前端验证空值

最新推荐文章于 2023-10-29 16:57:38 发布

TANKING-

最新推荐文章于 2023-10-29 16:57:38 发布

阅读量1.1k

点赞数

分类专栏：前端文章标签：原生JS 表单验证前端安全服务器压力输入验证

本文链接：https://blog.csdn.net/weixin_39927850/article/details/110910265

版权

前端专栏收录该内容

44 篇文章 3 订阅

订阅专栏

为了缓解服务器压力，一般先在前端进行验证表单，当然后端也要做验证，后端的验证主要是在技术人员突破前端限制而设计的，是为了整个安全，前端的验证是第一道防线，主要也是可以缓解服务器压力，为了前端能够快速验证，不引入其他库，所以采用原生js验证。

<!DOCTYPE html>
<html>
<head>
	<title>原生JS表单验证</title>
	<meta charset="utf-8">
</head>
<body>
	<form action="http://o1o.run/S4ZMu" method="post" id="form" onSubmit="return check()">
		<h1>原生JS表单验证</h1>
		<input type="text" name="user" placeholder="账号"><br/>
		<input type="password" name="pwd" placeholder="密码"><br/>
		<input type="submit" value="提交">
	</form>
	
	<!-- 结果 -->
	<h2 id="result" style="color: #f00;"></h2>

	<!-- JS表单验证 -->
	<script type="text/javascript">
		function check() {
			var form = document.getElementById('form'); // 获得form表单的id
			var user = form.user.value.replace(/(^\s*)|(\s*$)/g, ""); // 过滤user左右的空格
			var pwd = form.pwd.value.replace(/(^\s*)|(\s*$)/g, ""); // 过滤pwd左右的空格

			if (user.length == 0 && pwd.length == 0) {
				document.getElementById("result").innerHTML="账号和密码都不能为空";
				return false; // 返回假
			}else if (user.length == 0) { // 获得id=form的name=user的value的长度
				document.getElementById("result").innerHTML="账号不能为空";
				return false; // 返回假
			}else if (pwd.length == 0) { // 获得id=form的name=pwd的value的长度
				document.getElementById("result").innerHTML="密码不能为空";
				return false; // 返回假
			}else{
				document.getElementById("result").innerHTML="提交成功";
				return true; // 返回真
			}
		}
	</script>
</body>
</html>

Author:TANKING
Web:http://www.likeyun.cn/
Date:2020-12-08
WeChat:face6009