JQuery 实现注册表单校验

最新推荐文章于 2022-03-30 00:57:41 发布

原创最新推荐文章于 2022-03-30 00:57:41 发布 · 1.3k 阅读

14 ·

CC 4.0 BY-SA版权

JQuery 专栏收录该内容

35 篇文章

订阅专栏

本文介绍了一个使用JQuery进行表单验证的实际案例，包括手机号码和年龄的正则表达式验证，以及如何在客户端进行初步验证以减轻服务器压力。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

进行表单数据的验证可谓是很有必要的，我们都会在网页上先进行一下表单验证，然后服务器端再次进行验证，来确保用户提交数据的准确性,与减轻服务器的压力.

表单页面：

	<body>
		<form action="index.html" method="get">
			<p>tel:<input type="text" name="tel" id="tel" value="" maxlength="11" />
				<span id="telErr"></span></p>
			<p>age:<input type="text" name="age" id="age" value="" />
				<span id="ageErr"></span></p>

			<input type="submit" id="submit" value="注册">
		</form>
	</body>

界面如下：

表单验证流程图:

JQuery来验证:

1》失去焦点事件

2》表单提交事件

<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$(function() {

       //表单提交
		$("form").submit(function() {
			//首先执行需要把blur方法执行一遍
			$("form input").trigger("blur");
			//显示的错误信息 判断错误信息的长度 只要长度大于0就阻止提交判断错误提示
			 // alert($("#telErr").html().length+"\n"+$("#ageErr").html().length);
			if($("#telErr").html().length>0|| $("#ageErr").html().length>0){
				return false;
			}else{
				return true;
			}
			
		});

		$("#tel").blur(function() {

			//正则表达式
			var reg = /^1[398]\d{9}$/;

			//获得数据
			var tel = $(this).val();
			if(tel == "") {
				$("#telErr").html("手机号码不能为空!");
				return;
			} else if(!reg.test(tel)) {
				$("#telErr").html("手机号码必须是1开头的11位!");
				return;
			}

			//清空
			$("#telErr").html("");
			return true;

		});

		$("#age").blur(function() {
			//正则表达式
			//			var reg = /^\d$/;    //0-9
			//			var reg = /^[1-9]\d$/;    //10-99   [1-9][0-9]
			//			var reg = /^120|1[0-1]\d$/;    //100-119   1[0-1][0-9] / 120
			var reg = /^120$|^((1[0-1]|[1-9])?\d)$/; //0-120

			//获得数据
			var age = $(this).val();

			//判断
			if(age == "") {
				$("#ageErr").html("年龄不能为空！");
				return;
			} else if(!reg.test(age)) {
				$("#ageErr").html("年龄必须在0-120之间");
				return;
			}

			//清空
			$("#ageErr").html("");
			return true;

		});

	});
</script>

效果如下：

提交到index.html页面哦！