简单表单校验

最新推荐文章于 2022-03-29 08:37:12 发布

不出名的小子

最新推荐文章于 2022-03-29 08:37:12 发布

阅读量235

点赞数

本文链接：https://blog.csdn.net/qq_36074058/article/details/71123747

版权

在网上进行注册或者填写一些表单数据时，如果数据不和要求，通常会进行提示。

如下图，注册邮箱时所出现的一些不合要求的数据：

那么，如何实现这个效果？

<!DOCTYPE html>
<html>
<head>
<title>demo1.html</title>

<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/jquery-migrate-1.2.0.js"></script>
<script type="text/javascript">
	function check() {
		var mail = $(".a").val();
		if (mail == "") {
			$("#sp").text('邮箱不可为空');

			return false;
		}
		if (mail.length < 5) {
			$("#sp").text('邮箱长度必须大于5位');

			return false;
		}
		if (mail.indexOf("@") == -1) {

			$("#sp").text('邮箱格式不正确\n必须包含@');
			return false;
		}
		if (mail.indexOf(".") == -1) {

			$("#sp").text('邮箱格式不正确\n必须包含.');
			return false;
		}
		return true;

	}
	$(function() {
		$("#cc").submit(function() {
			return check();
		});
	});
</script>
</head>

<body>
	<form action="demo2.html" method="post" name="cc" id="cc">
		<p>
			邮箱：<input type="text" class="a"><span id="sp"></span>
		</p>
		<p>
			
		</p>

		<input name="d" type="submit" value="注册" class="c">
	</form>
</body>
</html>