【jQuery】第七课——使用jquery制作表单校验提示特效，正则表达式的应用

知识点：掌握string对象的用法、会使用正则表达式验证页面输入内容、会使用表单选择器。

 

1、表单基本验证技术

         无论是动态网站，还是其他 B/S 结构的系统，都离不开表单。表单作为客户端向服务器端提交数据的主要载体，如果提交的数据不合法，将会引出各种各样的问题，那么如何避免这样的问题昵？

1.1  表单验证的必要性

         有时，在用户填写表单时，我们希望所填入的资料必须是某特定类型的信息（如 int)，或是填入的值必须在某个特定的范围之内（如月份必须是 1~12)。在正式提交表单之前，必须检査这些值是否有效。

1.2  表单验证的两种方式

         我们先来了解一下什么是客户端验证和服务器端验证。客户端验证实际上就是在已下载的页面中，当用户提交表单的时候，它直接在页面中调用脚本来进行验证，这样可以减少服务器端的运算。而服务器端的验证则是将页面提交到服务器，由服务器端的程序对提交的表单数据进行验证，然后再返回响应结果到客户端，如图所示。服务器端验证的缺点是每一次验证都要经过服务器，不但消耗时间较长，而且会大大增加服务器的负担。

         那么到底是在客户端验证好还是在服务器端验证好呢？下面先来看一个例子。假如有一个网站，每天大约有 10000 名用户注册使用它的服务，如果用户填写的表单信息都让服务器去检查是否有效，服务器就得每天为 10000 名用户的表单信息进行验证，这样服务器将会不堪重负，甚至会出现死机现象。所以最好的解决办法就是在客户端进行验证，这样就能把服务器端的任务分给多个客户端去完成，从而减轻服务器端的压力，让服务器专门做其他更重要的事情。

         基于以上原因，我们需要使用 JavaScript 在客户端对表单数据进行验证。

 

1.3  表单验证的内容

         在学习表单验证之前，我们需要好好想想，在表单验证过程中会遇到哪些需要控制的地方。就像软件工程思想一样，先分析一下要在哪些方面进行验证。

         其实，表单验证包括的内容非常多，如验证日期是否有效或日期格式是否正确，检查表单元素是否为空、Email 地址是否正确，验证身份证号，验证用户名和密码，验证字符串是否以指定的字符开头、阻止不合法的表单被提交等。下面我们就以常用的注册表单为例，来 说明表单验证通常包括哪些内容。

•    检查表单元素是否为空（如名字和姓氏不能为空)。
•    验证是否为数字（如出生日期中的年月日必须为数字)。
•    验证用户输入的邮件地址是否有效（如电子邮件地址中必须有@和.字符)。
•    检查用户输入的数据是否在某个范围之内（如出生日期中的月份必须是 1~12，日期必须为 1~31)。
•    验证用户输入的信息长度是否足够（如输入的密码必须大于等于 6 个字符)。
•    检査用户输入的出生日期是否有效（如出生年份由 4 位数字组成，1、3、5、7、8、 10、12 月为 31 天，4、6、9、11 月为 30 天，2 月根据是否是润年判断为 28 天或 29 天)。

         实际上，在设计表单时，还会因情况不同而遇到其他很多不同的问题，这就需要我们自己去定义一些规定和限制。

 

1.3  表单验证的思路

         在网上进行注册或填写一些表单数据时，如果数据不符合要求，通常会进行提示。例如，在注册页面输入了不合要求的电子邮箱地址时，将会弹出提示信息，如图所示。 那么这些提示信息在什么情况下会弹出？如何编写 JavaScript 来验证表单数据的合法性？

(1) 首先获取表单元素的值，这些值一般都是 String 类型，包含数字、下划线等。

(2) 使用 JavaScript 中的一些方法对获取的 String 类型的数据进行判断。

(3) 表单 form 有一个事件 onsubmit，它是在提交表单之前调用的，因此可以在提交表单时触发 onsubmit 事件，然后对获取的数据进行验证。

 

 

1.3.1   使用string对象验证邮箱

         在【使用jQuery简化客户端开发】第一课：初步了解JavaScript，掌握JavaScript基础语法，已经初步接触了 String 对象的用法，下面结合电子邮件格式的验证这一应用场景，进一步巩固它的用法。

         在注册表单或登录电子邮箱时，经常需要填写 Email 地址，对输入的 Email 地址进行有效性验证，可以提高数据的有效性，避免不必要的麻烦。那么如何编写验证表单呢？当在如图 所示的 Email 文本框中没有输入任何内容单击“登录”按钮时，将会弹出提示对话框，提示“Email 不能为空”；当输入”webmaster"再单击“登录”按钮时，将会弹出对话框提示“Email 格式不正确必须包含@”；当输入“webmaSter@”时，再单击“登录”按钮，将会弹出对话框提示“Email 格式不正确必须包含.”。只有在 Email 地址中包含“@”和“.”符号时，其才是有效的 Email 地址。那么如何编写这样的 Email 地址验证脚本呢？参照内容：【jQuery】第一课：案例实践——运用JavaScript制作邮箱验证

思路分析

(1) 先获取表单元素（Email 文本框）的值（String 类型），然后进行判断。

(2) 使用 jQuery ID 选择器获得表单的输入元素（文本框对象），然后使用 jQuery 的val()方法获取文本框的值。

(3) 使用字符串方法(indexOf())来判断获得的文本框元素的值是否包含“@”和“.” 符号。

(4) 判断表单元素的值是否为空、是否包含“@”和“.”符号的脚本函数之后， 该如何调用编写好的脚本函数？其实，Email 地址的有效性验证发生在单击“登录”按钮之后，所以该事件是在提交表单时产生的，应该使用提交按钮来触发 onsubmit 事件，然后调用脚本函数执行。使用 jQuery 后，可以相应地使用 jQuery 封装的事件方法 submit()，它对应的是 onsubmit 事件。

(5) 当调用脚本函数验证表单数据时，如何判断表单是否被提交呢？表单的 onsubmit 事件根据函数返回值是 true 还是 false 来决定是否提交表单。当返回值是 false 时，不能提交表单，当返回值是 true 时提交表单。

案例代码：

（1）制作第一个登录页面

	
		
		
		
		
		
	
	
		

			
登录乐乐网
			

				Email：


				密  码：


				
			
		
		

			关于我们 | 诚聘英才 | 联系方式 | 帮助中心
		
	

代码分析：

1）return 语句会终止函数的执行并返回函数的值。

• retrun true； 返回正确的处理结果。
• return false；返回错误的处理结果，终止处理。
• return；把控制权返回给页面。
• 在js中，我们通常用return false来阻止提交表单或者继续执行下面的代码，通俗来说就是阻止执行默认的行为。

2）val()方法：

val() 方法返回或设置被选元素的 value 属性。

3）submit()方法：

当提交表单时，会发生 submit 事件。该事件只适用于

元素。submit() 方法触发 submit 事件，或规定当发生 submit 事件时运行的函数。

 

（2）制作第二个登录成功页面

	
		
		
		
	
	
		

			
成功登录乐乐网！！！
			关于我们 | 诚聘英才 | 联系方式 | 帮助中心
		
	

• 注意：在本地电脑进行邮箱提交验证时，如果出现错误提示：“内部服务器错误”
• 原因分析：method="post" post需要你有服务器去处理post请求，而我们本地练习时，一般是没有服务器的。
• 解决办法：使用method="get"提交就可以了，有内置的服务器。

 

1.3.1   文本框内容的验证

         在网站的注册等页面中，除了要经常验证电子邮件的格式之外，用户名、密码等文本内容也经常需要验证。例如，验证文本框的内容不能为空，注册页面中两次输入的密码必须相同，下面通过验证如图 所示的页面来学习如何验证文本框内容的合法性。

要求：

•    密码不能为空，并且密码包含的字符不能少于 6 个。
•    两次输入的密码必须一致。
•    姓名不能为空，并且姓名中不能有数字。

思路分析：

(1) 首先创建页面并插入一个表单，在表单中插入如上图所示的文本框，密码输入框的 id 分别为 pwd 和 repwd，姓名文本框的 id 为 user，最后编写脚本验证文本输入框中内容的有效性。

(2) 使用 String 对象的 length 属性验证密码的长度。

(3) 验证两次输入密码是否一致。当两个输入框的内容相同时，表示一致。

(4) 判断姓名中是否有数字。首先使用 length 属性获取文本长度，然后使用 for循环和 substring()方法依次截断单个字符，最后判断每个字符是否是数字。

案例代码：

	
		
		
		
		
		
	
	
		

			
注册乐乐网
			
				
输入密码:

				
再次输入密码:
				
您的姓名:
				

			
		
	

 

1.4   校验提示特效

         在在网上注册或填写各种表单时，经常会有某些文本框中显示自动提示信息，如图所示的 Email 自动提示文本。当单击此文本框时提示文本自动被清除，文本框的效果发生变化。

1.4.1   表单验证事件和方法

         文本框作为一个 HTML DOM 元素，可以应用 DOM 相关的方法和事件，通过这些方法和事件可改变文本框的效果。

类别	名称	描述
事件	onblur	失去焦点，当光标离开某个文本框时触发
	onfocus	获得焦点，当光标进入某个文本框时触发
方法	blur()	从文本域中移开焦点
	focus()	在文本域中设置焦点，即获得鼠标光标
	select()	选取文本域中的内容，突出显示输入区域的内容

案例练习1：运用focus()方法，制作邮箱输入框提示内容

案例说明：此案例是在上一个【登录】案例的基础上，进行了功能的补充，要求，邮箱输入框里，默认有提示文字“请输入正确的电子邮箱”，当用户单击输入框时，提示文字消失。当用户点击登录时，依然会按照之前的规则进行判断。

案例代码：

	
		
		
		
		
		
	
	
		

			
登录乐乐网
			

				Email：


				密  码：


				
			
		
		

			关于我们 | 诚聘英才 | 联系方式 | 帮助中心
		
	

代码分析：

（1）focus() 方法：当元素获得焦点时（当通过鼠标点击选中元素或通过 tab 键定位到元素时），发生 focus 事件。 focus() 方法触发 focus 事件，或规定当发生 focus 事件时运行的函数。 提示：该方法通常与 blur() 方法一起使用。

• 触发被选元素的 focus 事件：$(selector).focus()；
• 添加函数到 focus 事件：$(selector).focus(function);

（2）select()方法：当 textarea 或文本类型的 input 元素中的文本被选择（标记）时，会发生 select 事件。 select() 方法触发 select 事件，或规定当发生 select 事件时运行的函数。

• 触发被选元素的 select 事件：$(selector).select();
• 添加函数到 select 事件：$(selector).select(function);

 

案例练习2：运用focus()方法，制作文本输入提示特效

案例说明：此案例是在上一个【注册】案例的基础上，增加了文本输入提示特效，当用户输入的内容不符合要求时，会给出提示。

案例代码：

	
		
		
		
		
		
	
	
		

			
注册乐乐网
			

				
Email:

				
输入密码:

				
再次输入密码:
				
您的姓名:
				

			
		
	

代码分析：

（1）blur() 方法：当元素失去焦点时发生 blur 事件。 blur() 方法触发 blur 事件，或规定当发生 blur 事件时运行的函数。 提示：该方法常与 focus() 方法一起使用。

为被选元素触发 blur 事件：$(selector).blur();

添加函数到 blur 事件：$(selector).blur(function);

 

2、正则表达式

2.1   为什么需要正则表达式

         在开发 HTML 表单时经常会对用户输入的内容进行验证。例如，前面验证邮箱是否正确，当用户输入的邮箱是“zs@.”，然后单击“注册”按钮进行 Email 验证时，检测的结果却认为这是一个正确的邮箱地址。

         我们知道这并不是一个正确的邮箱，但检测却认为是正确的，为什么会出现这样的情况呢？因为我们在验证邮箱时，只检测邮箱地址中是否包含符号“@”和“.”，这样简单的验证是不能严谨地验证邮箱是否正确的。下面看一个非常严谨的邮箱验证，如图所示，当输入 zs.@sina.时，检测的结果是电子邮件格式不正确，重新输入“zs @Sina.c”，检测结果仍然不正确，当输入“[email protected]”时检测通过。

         从上面的例子可以看出，必须输入正确的邮箱地址，否则检测不能通过。这么严谨的邮件格式验证，是否需要写许多代码来一一地验证呢？我们看一下这个验证邮箱地址的代码。

var email=$("email");
var email_prompt=divId("email_prompt");
email_prompt.innerHTML="";
var reg=/^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/;
if(reg.test(email)==false){
email_prompt.innerHTML="Email 格式不正确，例如 [email protected]";
return false;
}
return true;

          从上面的代码可以看到，仅仅用了几行代码就实现了这么严谨的验证，是不是很神奇呢？ 这是如何实现的呢？答案——正则表达式。 实际上，在工作中对表单的验证并不是简单地验证输入内容的长度，是否是数字、字母等，通常会验证输入的内容是否符合某种格式。

 

2.1   什么是正则表达式

         正则表达式是一个描述字符模式的对象，它是由一些特殊的符号组成的，这些符号和在SQLServer 中学过的通配符一样，其组成的字符模式用来匹配各种表达式。

         RegExp 对象是 RegularExpression(正则表达式）的缩写，它是对字符串执行模式匹配的强大工具。简单的模式可以是一个单独的字符，复杂的模式包括了更多的字符，如验证电子邮件地址、电话号码、身份证号码等字符串。

        通俗的说：正则表达式是一种特殊的字符串模式，用于匹配一组字符串，就好比用模具做产品，而正则就是这个模具，定义一种规则去匹配符合规则的字符。

2.1.1   定义正则表达式

定义正则表达式有两种形式，一种是普通方式，另一种是构造函数的方式。

1) 普通方式

普通方式的语法格式：var reg=/表达式/附加参数

•    表达式：一个字符串代表了某种规则，其中可以使用某些特殊字符来代表特殊的规则，后面会详细介绍。
•    附加参数：用来扩展表达式的含义，主要有以下 3 个参数。
  •   g：代表可以进行全局匹配。
  •   i：代表不区分大小写匹配。
  •   m：代表可以进行多行匹配。
• 特点：脚本加载后，即可得到编译，如果你的表达式不是变化的，用这种方式效率更高。

上面 3 个参数可以任意组合，代表复合含义，当然也可以不加参数。例如：

var reg=/white/；
var reg=/white/g；

2)构造函数

构造函数方式的语法格式：var reg=new RegExp(“表达式",["附加参数”]);

• 特点：这种方式，在运行时编译，如果事先不能确定表达式的规则，可使用此方法。

其中表达式与附加参数的含义与上面普通方式中定义的含义相同。例如：

var reg=new RegExp("white")；
var reg=new RegExp("white","g");

说明： 普通方式中的表达式必须是一个常量字符串，而构造函数中的表达式可以是常量字符串， 也可以是一个 JavaScript 变量。例如，根据用户的输入作为表达式的参数：var reg=new RegExp($(“#id").val(),"g");

        不管是使用普通方式还是使用构造函数的方式定义正则表达式，都需要规定表达式的模式，那么怎样去规定一个表达式呢？

 

2.1.2   正则表达式的简单模式和复合模式

从规范上讲，表达式的模式分为简单模式和复合模式。

1) 简单模式：简单模式是指通过普通字符的组合来表达的模式。例如：

var reg=/abc/；//使用简单模式编写正则表达式，也就是直接给定普通字符

         简单模式只能表示具体的匹配，平时很少用到。因为如果要匹配一个邮箱地址或一个电话号码，就不能使用具体的匹配，这时就用到了复合模式。

2) 复合模式：复合模式是指含有通配符来表达的模式，这里的通配符与 SQLServer 中的通配符相似。 例如：

var reg=/ab*c/；//使用复合模式编写的表达式，包含有通配符，这里的通配符与SQL Server中的通配符相似

其中*是通配符，代表着特殊的含义，因此复合模式可以表达更为抽象化的规则模式。

案例练习：正则表达式两种模式的练习

注意：console.log() 方法用于在控制台输出信息。 该方法对于开发过程进行测试很有帮助。

 

 

2.1.3   正则表达式的常用符号

表1：正则表达式的常用字符

符号	描述	符号	描述
/…/	代表一个模式的开始和结束	^	匹配字符串的开始
[abc]	查找方括号之间的任何字符。	$	匹配字符串的结束
[0-9]	查找任何从 0 至 9 的数字。	\d	匹配一个数字字符，等价于[0-9]
.	除了换行符之外的任意字符	\D	除了数字之外的任何字符，等价于[^0-9]
\s	任何空白字符	\w	匹配一个数字、下划线或字母字符，等价于[A-Za-z0-9_]
\S	任何非空白字符	\W	任何非单字字符，等价于[^a-zA-z0-9_]

          从前面验证邮箱的正则表达式可以看出，字符“@”前后的字符可以是数字、字母或下划线，但是在字符“.”之后的字符只能是字母，那么{2,3}是什么意思呢？有时我们会希望某些字符在一个正则表达式中出现规定的次数。

表2：正则表达式的重复字符

符号	描述
{n}	匹配前一项n次
{n,}	匹配前一项n次，或者多次
{n,m}	匹配前一项至少n次，但是不能超过m次
*	匹配前一项0次或多次，等价于{0,}
+	匹配前一项1次或多次，等价于{1,}
？	匹配前一项0次或1次，也就是说前一项是可选的，等价于{0,1}

表3：常用正则表达式

常用正则表达式
用户名：4到16位 （字母，数字，下划线，减号）	/^[a-zA-Z0-9_-]{4,16}$/
密码：6到18位	/^[a-z0-9_-]{6,18}$/
电子邮箱：	/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/
手机号码：	/^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$/
身份证号：(18位)	/^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
QQ号码：（5到11位））	/^[1-9][0-9]{4,10}$/
十六进制颜色正则：	/^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/
数字正则：	/^-?\d*\.?\d+$/

更多正则表达式了解：常用正则表达式大全-----用户名、密码、邮箱、等数据格式的校验

正则表达式匹配查询：（在线查询）https://rubular.com/

 

2.1.4   RegExp 对象的常用方法

      如何在页面中使用正则表达式呢？主要是使用RegExp 对象（正则表达式）的方法来进行

方法	描述
exec(str)	exec() 方法用于检索字符串中的正则表达式的匹配。 如果字符串中有匹配的值，返回该匹配值，否则返回 null。
test()	用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false。

（1）使用exec(str)方法：

（2）使用test(str)方法：

案例练习：将上一个案例的exec方法，换成test方法，看一下结果

 

2.1.4   string对象的常用方法

      JavaScript 除了支持 RegExp 对象的正则表达式方法外，还支持 String 对象的正则表达式方法。String 对象定义了使用正则表达式来执行强大的模式匹配和文本检索与替换函数的方法。String 对象的方法如表所示：

方法	描述
match()	找到一个或多个正则表达式的匹配
search()	检索与正则表达式相匹配的值
replace()	替换与正则表达式匹配的字符串
split()	把字符串分割为字符串数组

（1）match(正则表达式)方法：

      match(reg) 方法将检索字符串 String Object，以找到一个或多个与 RegExp 匹配的文本。这个方法的行为在很大程度上有赖于 RegExp 是否具有标志 g。如果RegExp 没有标志 g，那么 match() 方法就只能在 stringObject 中执行一次匹配。如果没有找到任何匹配的文本， match() 将返回 null。否则，它将返回一个数组，其中存放了与它找到的匹配文本有关的信息。

注意：match()方法里的参数，可以是正则表达式，也可以是RegExp对象实例。

 

（2）search(正则表达式)方法：

        search(reg) 方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。 如果没有找到任何匹配的子串，则返回 -1。如果找到了，则返回匹配成功的第一个位置。

注意：indexOf()方法和search()方法的区别。

 

（3）replace()方法：

       replace(reg,'str') 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

 

（4）split()方法：

       split(reg,[maxLength]) 方法用于把一个字符串分割成字符串数组。 maxLength参数可选，限制返回结果的最大数量。提示： 如果把空字符串 ("") 用作 separator，那么 stringObject 中的每个字符之间都会被分割。（替代方法，使用正则表达式切割，str.split(/\s+/)，其中\s表示空格，+表示1个或多个）

 

3、   正则表达式的应用

案例练习：验证手机号

	
		
		
		
		
	
	
		

			手机号：
		
	

注意：在实际的开发中经常遇到电子邮箱地址、用户名、密码、日期、各种号码等的判断，但是关于这些内容的正则表达式可以在网上查阅资料，一般不用自己书写。

 

4、  表单选择器

      在前面的表单验证效果中，jQuery 起的一个主要作用就是使用选择器获取元素，所用的选择器主要是 ID 选择器，但是在一些复杂的表单中，有时候需要获取多个表单元素，事实上 jQuery 提供了专门针对表单的一类选择器，这就是表单选择器。

4.1    表单选择器简介

      顾名思义，表单选择器就是用来选择文本输入框、按钮等表单元素。

表：标案选择器

语法	描述	示例
:input	匹配所有input、textarea、select和button 元素	$("#myform  :input")选取表单中所有的input、select和button元素
:text	匹配所有单行文本框	$("#myform  :text")选取email 和姓名两个input 元素
:password	匹配所有密码框	$("#myform  :password" )选取所有 元素
:radio	匹配所有单项按钮	$("#myform  :radio")选取元素
:checkbox	匹配所有复选框	$(" #myform  :checkbox " )选取 元素
:submit	匹配所有提交按钮	$("#myform  :submit " )选取 元素
:image	匹配所有图像域	$("#myform  :image" )选取 元素
:reset	匹配所有重置按钮	$(" #myform  :reset " )选取 元素
:button	匹配所有按钮	$("#myform  :button" )选取button 元素
:file	匹配所有文件域	$(" #myform  :file" )选取 元素
:hidden	匹配所有不可见元素，或者type 为hidden的元素	$("#myform  :hidden" )选取、style="display: none"等元素

注意：虽然 jQuery 考虑了浏览器兼容性问题，但是由于浏览器版本众多，也不能做到百分之百的兼容，另外，不同版本的 jQuery 库兼容程度也不太一致。上述“:hidden”选择器在 Firefox 浏览器下，不包括 option 元素。

       除了基本的表单选择器，jQueiy 中还提供了针对表单元素的属性过滤器，按照表单元素的属性获取特定属性的表单元素。

语法	描述	示例
:enabled	匹配所有可用元素	$("#userform:enabled")匹配 form 内部除 编号输入框外的所有元素
:disabled	匹配所有不可用元素	$("#userform:disabled")匹配编号输入框
:checked	匹配所有被选中元素（复选框、单项按钮、select中的option)	$(n#userform:checkedn)匹配“性别”中的 “男”选项和“爱好”中的“编程”选项
:selected	匹配所有选中的 option 元素	$("#userform:selected")匹配“家乡”中的 “北京”选项

 

 

 

=======这里是结束分割线========