webgis 使用javascript实现数据的校验功能

YuanYWRS

于 2022-05-27 16:23:02 发布

阅读量512

点赞数

分类专栏： WebGIS 文章标签： javascript 前端数据校验

本文链接：https://blog.csdn.net/yuanYW7556/article/details/125004635

版权

WebGIS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

进行前台的数据校验好处在于，如果用户输入了非法数据可以直接禁止请求的发送，从而避免服务器不必要的响应开支，同时可以实现不用刷新提示用户重新填写信息。

以下代码实现用户输入数据是否为空的校验：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link href="style/leeui/style/leeui-base.css"type="text/css"rel="stylesheet">
		<style type="text/css">
		<body>{text-align:center;}
		</style>
		<script type="text/javascript">
			function check(){
				if (document.getElementsByName('email')[0].value == ''||document.getElementByName('password')[0].value == ''){
					alert('请输入正确的用户名和密码')
					return false;
				};
			}
		</script>
	</head>
		</body>
			<div id="login-box">
				<h1>XX智慧地理信息系统</h1>
				<form action=""method="post">
				<ul class="lee-form-normal">
					<li>
						<div class="lee-input">
							<label>账户</label>
							<input type="text" name="email" value="">
						</div>
					</li>
					<li>
						<div class="lee-input">
							<label>密码</label>
							<input type="password" name="password" value="">
						</div>
					</li>
					<li>
						<input class="lee-button" style="width: 100px"type="button"value="提交" onclick="check()">
					</li>
				</ul>
				</form>
			</div>
		<title></title>
	</head>
	<body>
	</body>
</html>

在这里插入图片描述

代码分析：

在代码种有一个比较简单的名字为check的简易检验函数，它是添加在head标签之间的检验内容是否为空。
：

<script type="text/javascript">
			function check(){
				if (document.getElementsByName('email')[0].value == ''||document.getElementByName('password')[0].value == ''){
					alert('请输入正确的用户名和密码')
					return false;
				};
			}
		</script>

通过document.getElementsByName()这个DOM接口可以获取name为某个值的元素的数组，获取该数组的第一个元素，并获得它的value属性document.getElementsByName(‘email’)[0].value，如果value为空字符串的判断，则弹出提示框，函数返回false的作用是阻止提交事件的发生，当type为submit的按钮被点击时网页会自动跳转到目标网址，但是校验不通过我们希望用户能够停留在当前页面。

需要通过单击事件触发这个check()函数，可以通过定义好submit按钮单击事件的回调函数，当用户点击这个按钮时会执行定义好的检测函数：
<input class=“lee-button” style="width: 100px"type="button"value=“提交” οnclick=“check()”>

如果将onclick事件改为onbiur事件执行check函数，只需要在编辑好某个输入框并点击其他地方时就会自动进行数数据校验。