JQuery 实现注册表单校验

素颜马尾好姑娘i 2023-10-18 13:32 77阅读 0赞

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

**表单页面：**

<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>

界面如下：

![20190109162435351.png][]

表单验证流程图:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70][]

## 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>

效果如下：

![20190109162739530.png][]

![20190109162724141.png][]

![20190109162754934.png][]

提交到index.html页面哦！

![20190109162810198.png][]

[20190109162435351.png]: https://img-blog.csdnimg.cn/20190109162435351.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190109162550182.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4,size_16,color_FFFFFF,t_70
[20190109162739530.png]: https://img-blog.csdnimg.cn/20190109162739530.png
[20190109162724141.png]: https://img-blog.csdnimg.cn/20190109162724141.png
[20190109162754934.png]: https://img-blog.csdnimg.cn/20190109162754934.png
[20190109162810198.png]: https://img-blog.csdnimg.cn/20190109162810198.png

发表评论取消回复

表情：

评论列表（有 0 条评论，77人围观）

还没有评论，来说两句吧...

相关阅读

相关 JQuery 实现注册表单校验

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

素颜马尾好姑娘i/ 2023年10月18日 13:32/ 0 赞/ 78 阅读

相关注册表单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

秒速五厘米/ 2022年08月13日 13:39/ 0 赞/ 122 阅读

相关 jQuery带格式验证的注册表单

这是一款外观很不错，而且功能也比较强大的jQuery注册表单，这款jQuery表单的特点是带有严格的表单字段格式验证功能，比如电子邮箱的格式、用户名格式以及密码复杂度和长度等。

系统管理员/ 2022年08月04日 16:52/ 0 赞/ 111 阅读

相关 jquery实现可切换主题的注册表单特效

原文：[jquery实现可切换主题的注册表单特效][jquery] 源代码下载地址： [http://www.zuidaima.com/share/1878841815534

比眉伴天荒/ 2022年07月14日 02:23/ 0 赞/ 130 阅读

相关 Demo_javascript_注册表单校验

对于一个注册页面，将表单中的数据提交到action指定的位置,在开发中，需要对数据进行验证，例如：邮箱，会员名，密码等不能为空，会员名长度，密码长度需要符合规定，邮箱格式要正确

淡淡的烟草味﹌/ 2022年06月10日 09:07/ 0 赞/ 154 阅读

相关注册表单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xht

r囧r小猫/ 2022年06月08日 07:07/ 0 赞/ 157 阅读

相关 jquery实现注册表单验证

![Center][] 要求：技术要求（html+css+jquery）图标题后有 1. 完成页面布局（页面布局合理、样式和图片一致、代码无误各） 2. 用jquery

àì夳堔傛蜴生んèń/ 2022年06月07日 07:56/ 0 赞/ 269 阅读

相关 jQuery-表单校验

为什么要表单验证 1.减轻服务器的压力 2.保证输入的数据符合要求 ![70][] 常用的表单验证 1. 日期格式 2. 表单元素是否为空

末蓝、/ 2022年05月12日 08:36/ 0 赞/ 342 阅读

相关使用JavaScript完成注册表单数据校验

1、需求分析用户在进行注册时会输入一些内容，但是有些用户会输入一些不合法的内容，导致服务器的压力过大。此时我们需要对用户输入的内容进行一个校验（前端校验和后端校验

逃离我推掉我的手/ 2022年04月22日 22:34/ 0 赞/ 167 阅读

相关 jQuery中实现validation表单校验

js/jquery-3.3.1.js， jquery.validate.min.js和messages\_zh.min.js网盘下载：链接：[https://pan.ba

偏执的太偏执、/ 2021年09月18日 23:06/ 0 赞/ 330 阅读