JQuery制作网页——表单验证

 

1、  表单验证：减轻服务器的压力、保证输入的数据符合要求；

2、  常用的表单验证：日期格式、表单元素是否为空、用户名和密码、E-mail地址、身份证号码等；

3、  表单验证的思路：

1.     获得表单元素值，这些值一般是String类型，包含数字、下划线等；

2.     使用JavaScript的一些方法对获取的String类型的数据进行判断；

3.     当表单提交时，触发onsubmit事件，对获取的数据进行验证；

●表单选择器用于选取某些特定的表单元素，比如所有单选按钮或隐藏的元素；

4、表单选择器：

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

5、表单属性过滤选择器：

语法	描述	示例
:enabled	匹配所有可用元素	$(" #userform :enabled" )匹配form内部除编号输入框外的所有元素
:disabled	匹配所有不可用元素	$(" #userform :disabled" )匹配被禁用的输入框
:checked	匹配所有被选中元素（复选框、单项按钮、select 中的option）	$(" #userform :checked" )匹配选中的选项
:selected	匹配所有选中的option 元素	$(" #userform :selected" ) 匹配指定元素的选项

6、验证表单内容：

●使用String 对象验证邮箱：不能为空，格式正确 ●文本框内容的验证： 密码不能为空，不少于6个字符，姓名不能为空，不能有数字
●使用String 对象验证邮箱： ●实现思路 　　1、 使用val( )方法获取文本框的值 　　2、 使用indexOf( ) 来判断字符串是否包含“@”和“.” 　　3、使用方法submit( )提交表单 　　4、根据返回值是true还是false来决定是否提交表单		eg：   $(document).ready(function(){       $("form").submit(function(){             var mail = $("#myform :text").val();             if (mail=="") {//检测Email是否为空                   alert("Email不能为空");                   return false;             }             if (mail.indexOf("@") == -1) {                   alert("Email格式不正确\n必须包含@");                   return false;             }             if (mail.indexOf(".") == -1) {                   alert("Email格式不正确\n必须包含.");                   return false;             }             return true;       }) })
●非空验证：  if (mail == "") {           //检测Email是否为空      alert("Email不能为空");      return false; }
●字符串查找：indexOf()：查找某个指定的字符串值在字符串中首次出现的位置 　　var str="this is JavaScript"; 　　var selectFirst=str.indexOf("Java");  //返回8 　　var selectSecond=str.indexOf("Java",12);   //返回11
●文本框内容的验证： 　　1、实现思路 　　2、使用String对象的length属性验证密码的长度 　　3、验证两次输入密码是否一致 　　4、使用length属性获取文本长度，然后使用for循环和substring( )方法依次截断单个字符，最后判断每个字符是否是数字
●长度验证： 　　if(pwd.length<6){     //length属性可以获取字符串长度    　　   alert("密码必须等于或大于6个字符");  　　return false; 　　}	●判断字符串是否有数字：使用for循环和substring()方法依次截断单个字符，再判断每个字符是否是数字 for (var i = 0; i < user.length; i++) {     //截取单个字符     var j = user.substring(i, i + 1);     if (isNaN(j) == false) {         alert("姓名中不能包含数字");         return false;     } }
eg：注册页面的验证
验证密码： var pwd = $("#pwd").val();   if (pwd == "") {        alert("密码不能为空");           return false;     }      if (pwd.length < 6) {         alert("密码必须等于或大于6个字符");           return false;      }      var repwd = $("#repwd").val();        if (pwd != repwd) {             alert("两次输入的密码不一致");              return false;          }		验证账号： var user = $("#user").val();       if (user == "") {          alert("姓名不能为空");          return false; }      for (var i = 0; i < user.length; i++) {             var j = user.substring(i, i + 1);               if (isNaN(j) == false) {                   alert("姓名中不能包含数字");                     return false;                   }               }

7、表单验证事件和方法：

• ●表单验证需要综合运用元素的事件和方法

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

8、 正则表达式：是一个描述字符模式的对象，它是由一些特殊的符号组成的，和SQL Server中的通配符一样，其组成的字符模式用来匹配各种表达式；

●为什么需要正则表达式：简洁的代码、严谨的验证文本框中的内容

 　　●一个简单的表达式即可验证邮箱

 　　var reg= /^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/;

　　if(reg.test(email) ==false){ 

   　　 $email_prompt.html("电子邮件格式不正确,请重新输入");

    　　return false;

　　}

●定义正则表达式：

　　★普通方式语法：

　　　　var reg=/表达式/附加参数

　　　　 ◆表达式：一个字符串代表了某种规则，其中可以使用某些特殊字母来代表特殊的规则；

　　　　 ◆附加参数：用来扩展表达式的含义，主要三个参数如下：

  　　　　   ☆g：代表可以进行全局匹配；

   　　　　  ☆i：代表不区分大小写匹配；

   　　　　  ☆m：代表可以进行多行匹配；

     　　　　　　eg： var reg=/white/;

　　　　　　　　　　var reg=/white/g;

      ★构造函数语法：

　　　　var reg=new RegExp("表达式","附加参数")

 　　　　　　☆表达式可以是一个常量字符串，也可以是一个JavaScript变量；

●表达式的模式：

   ★简单模式：通过普通字符串的组合来表达的模式（只能表示具体的匹配）；

      eg： var reg=/china/;

　　　　   var reg=/abc8/;

   ★复合模式：可以使用通配符表达更为抽象的规则模式；

        eg：var reg=/^\w+$/;

　　　　    var reg=/^\w+@\w+.[a-zA-Z]{2,3}(.[a-zA-Z]{2,3})?$/;

9、RegExp对象：

• ●RegExp对象的方法：

方法	描述
exec	检索字符中是正则表达式的区配，返回找到的值，并确定其位置
test	检索字符串中指定的值，返回true或false

     　　　　　　　　　　　　 ★test()方法：用于检测一个字符串是否匹配某个模式：

         　　　　　　　　　　　　　　　　 语法：正则表达式对象实例.test(字符串)；//如果字符串中有正则表达式匹配的文本返回true，否则返回false；

●RegExp对象的属性：

属性	描述
global	RegExp对象是否具有标志g
ignoreCase	RegExp对象是否具有标志i
multiline	RegExp对象是否具有标志m

    　　　　　　　　  ★global：用于返回正则表达式是否包含标志g，它声明了给定的正则表达式是否执行全局匹配，如果g被标志返回true，否则返回false；

      　　　　　　　　★ignoreCase：属性用于返回正则表达式是否包含标志i，它声明了给定的正则表达式是否执行忽略大小写的匹配，如果被标志返回true；

      　　　　　　　　★multiline：属性用于返回正则表达式是否包含标志m，它声明了给定的正则表达式是否以多行模式执行模式匹配，被标志返回true；

●String对象的方法：

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

      ★math（）：该方法可以在字符串内检索指定的值，找到一个或多个正则表达式的匹配；类似于indexOf()，但indexOf()返回的时字符串的位置，不是指定的值

           语法：字符串对象.match(searchString或regexpObject);

                  //searchString：检索的字符串的值；

                  //regexpObject：规定要匹配模式的RegExp对象；

      ★replace()：该方法用于在字符串中用一些字符串替换另一些字符，或替换一个与正则表达式匹配的子串；

            语法：字符串对象。replace(RegExp对象或字符串，“替换的字符串”)；//如果设置了全文检索，则符合的会全部被替换，否则只替换一个；

      ★split()：该方法将字符串分割成一系列字串并通过一个数组将这一系列字串返回；

            语法：字符串对象.split(分割符，n);  //分割符可以是字符串，也可以是正则表达式，n为限制输出数组的个数，可选项，若没有则返回整个数组；

●正则表达式符号：

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

    　　　　　　　　 ★@ 前后的字符可以是数字、字母、或下划线；

   　　　　　　　　  ★但是.之后的字符只能是字母；

字符	描述
\	将下一个字符标记为一个特殊字符、或一个原义字符、或一个 向后引用、或一个八进制转义符。例如，'n' 匹配字符 "n"。'\n' 匹配一个换行符。序列 '\\' 匹配 "\" 而 "\(" 则匹配 "("。
^	匹配输入字符串的开始位置。如果设置了 RegExp 对象的 Multiline 属性，^ 也匹配 '\n' 或 '\r' 之后的位置。
$	匹配输入字符串的结束位置。如果设置了RegExp 对象的 Multiline 属性，$ 也匹配 '\n' 或 '\r' 之前的位置。
*	匹配前面的子表达式零次或多次。例如，zo* 能匹配 "z" 以及 "zoo"。* 等价于{0,}。
+	匹配前面的子表达式一次或多次。例如，'zo+' 能匹配 "zo" 以及 "zoo"，但不能匹配 "z"。+ 等价于 {1,}。
?	匹配前面的子表达式零次或一次。例如，"do(es)?" 可以匹配 "do" 或 "does" 。? 等价于 {0,1}。
{n}	n 是一个非负整数。匹配确定的 n 次。例如，'o{2}' 不能匹配 "Bob" 中的 'o'，但是能匹配 "food" 中的两个 o。
{n,}	n 是一个非负整数。至少匹配n 次。例如，'o{2,}' 不能匹配 "Bob" 中的 'o'，但能匹配 "foooood" 中的所有 o。'o{1,}' 等价于 'o+'。'o{0,}' 则等价于 'o*'。
{n,m}	m 和 n 均为非负整数，其中n <= m。最少匹配 n 次且最多匹配 m 次。例如，"o{1,3}" 将匹配 "fooooood" 中的前三个 o。'o{0,1}' 等价于 'o?'。请注意在逗号和两个数之间不能有空格。
?	当该字符紧跟在任何一个其他限制符 (*, +, ?, {n}, {n,}, {n,m}) 后面时，匹配模式是非贪婪的。非贪婪模式尽可能少的匹配所搜索的字符串，而默认的贪婪模式则尽可能多的匹配所搜索的字符串。例如，对于字符串 "oooo"，'o+?' 将匹配单个 "o"，而 'o+' 将匹配所有 'o'。
.	匹配除换行符（\n、\r）之外的任何单个字符。要匹配包括 '\n' 在内的任何字符，请使用像"(.|\n)"的模式。
(pattern)	匹配 pattern 并获取这一匹配。所获取的匹配可以从产生的 Matches 集合得到，在VBScript 中使用 SubMatches 集合，在JScript 中则使用 $0…$9 属性。要匹配圆括号字符，请使用 '\(' 或 '\)'。
(?:pattern)	匹配 pattern 但不获取匹配结果，也就是说这是一个非获取匹配，不进行存储供以后使用。这在使用 "或" 字符 (|) 来组合一个模式的各个部分是很有用。例如， 'industr(?:y|ies) 就是一个比 'industry|industries' 更简略的表达式。
(?=pattern)	正向肯定预查（look ahead positive assert），在任何匹配pattern的字符串开始处匹配查找字符串。这是一个非获取匹配，也就是说，该匹配不需要获取供以后使用。例如，"Windows(?=95|98|NT|2000)"能匹配"Windows2000"中的"Windows"，但不能匹配"Windows3.1"中的"Windows"。预查不消耗字符，也就是说，在一个匹配发生后，在最后一次匹配之后立即开始下一次匹配的搜索，而不是从包含预查的字符之后开始。
(?!pattern)	正向否定预查(negative assert)，在任何不匹配pattern的字符串开始处匹配查找字符串。这是一个非获取匹配，也就是说，该匹配不需要获取供以后使用。例如"Windows(?!95|98|NT|2000)"能匹配"Windows3.1"中的"Windows"，但不能匹配"Windows2000"中的"Windows"。预查不消耗字符，也就是说，在一个匹配发生后，在最后一次匹配之后立即开始下一次匹配的搜索，而不是从包含预查的字符之后开始。
(?<=pattern)	反向(look behind)肯定预查，与正向肯定预查类似，只是方向相反。例如，"(?<=95|98|NT|2000)Windows"能匹配"2000Windows"中的"Windows"，但不能匹配"3.1Windows"中的"Windows"。
(?<!pattern)	反向否定预查，与正向否定预查类似，只是方向相反。例如"(?<!95|98|NT|2000)Windows"能匹配"3.1Windows"中的"Windows"，但不能匹配"2000Windows"中的"Windows"。
x|y	匹配 x 或 y。例如，'z|food' 能匹配 "z" 或 "food"。'(z|f)ood' 则匹配 "zood" 或 "food"。
[xyz]	字符集合。匹配所包含的任意一个字符。例如， '[abc]' 可以匹配 "plain" 中的 'a'。
[^xyz]	负值字符集合。匹配未包含的任意字符。例如， '[^abc]' 可以匹配 "plain" 中的'p'、'l'、'i'、'n'。
[a-z]	字符范围。匹配指定范围内的任意字符。例如，'[a-z]' 可以匹配 'a' 到 'z' 范围内的任意小写字母字符。
[^a-z]	负值字符范围。匹配任何不在指定范围内的任意字符。例如，'[^a-z]' 可以匹配任何不在 'a' 到 'z' 范围内的任意字符。
\b	匹配一个单词边界，也就是指单词和空格间的位置。例如， 'er\b' 可以匹配"never" 中的 'er'，但不能匹配 "verb" 中的 'er'。
\B	匹配非单词边界。'er\B' 能匹配 "verb" 中的 'er'，但不能匹配 "never" 中的 'er'。
\cx	匹配由 x 指明的控制字符。例如， \cM 匹配一个 Control-M 或回车符。x 的值必须为 A-Z 或 a-z 之一。否则，将 c 视为一个原义的 'c' 字符。
\d	匹配一个数字字符。等价于 [0-9]。
\D	匹配一个非数字字符。等价于 [^0-9]。
\f	匹配一个换页符。等价于 \x0c 和 \cL。
\n	匹配一个换行符。等价于 \x0a 和 \cJ。
\r	匹配一个回车符。等价于 \x0d 和 \cM。
\s	匹配任何空白字符，包括空格、制表符、换页符等等。等价于 [ \f\n\r\t\v]。
\S	匹配任何非空白字符。等价于 [^ \f\n\r\t\v]。
\t	匹配一个制表符。等价于 \x09 和 \cI。
\v	匹配一个垂直制表符。等价于 \x0b 和 \cK。
\w	匹配字母、数字、下划线。等价于'[A-Za-z0-9_]'。
\W	匹配非字母、数字、下划线。等价于 '[^A-Za-z0-9_]'。
\xn	匹配 n，其中 n 为十六进制转义值。十六进制转义值必须为确定的两个数字长。例如，'\x41' 匹配 "A"。'\x041' 则等价于 '\x04' & "1"。正则表达式中可以使用 ASCII 编码。
\num	匹配 num，其中 num 是一个正整数。对所获取的匹配的引用。例如，'(.)\1' 匹配两个连续的相同字符。
\n	标识一个八进制转义值或一个向后引用。如果 \n 之前至少 n 个获取的子表达式，则 n 为向后引用。否则，如果 n 为八进制数字 (0-7)，则 n 为一个八进制转义值。
\nm	标识一个八进制转义值或一个向后引用。如果 \nm 之前至少有 nm 个获得子表达式，则 nm 为向后引用。如果 \nm 之前至少有 n 个获取，则 n 为一个后跟文字 m 的向后引用。如果前面的条件都不满足，若 n 和 m 均为八进制数字 (0-7)，则 \nm 将匹配八进制转义值 nm。
\nml	如果 n 为八进制数字 (0-3)，且 m 和 l 均为八进制数字 (0-7)，则匹配八进制转义值 nml。
\un	匹配 n，其中 n 是一个用四个十六进制数字表示的 Unicode 字符。例如， \u00A9 匹配版权符号 (?)。

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

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

eg：验证邮政编码和手机号码 ●中国的邮政编码都是6位 ●手机号码都是11位，并且第1位都是1 示例结果： 分析： var regCode=/^\d{6}$/;     //^:开头，$：结束，\d：数字，{6}：6位 var regMobile=/^1\d{10}$/; //1：以1开头，\d：数字，{10}：10位

$(document).ready(function(){     $("#code").blur(function(){         var code = $(this).val();         var $codeId = $("#divCode");         var regCode = /^\d{6}$/;         if (regCode.test(code) == false) {             $codeId.html("邮政编码不正确，请重新输入");             return false;         }         $codeId.html("");         return true;     }); $("#mobile").blur(function(){         var mobile = $(this).val();         var $mobileId = $("#divMobile");         var regMobile = /^1\d{10}$/;         if (regMobile.test(mobile) == false) {             $mobileId.html("手机号码不正确，请重新输入");             return false;         }        $mobileId.html("");         return true;     }) })

●这则表达式中有：（）、[]、{}区别如下：

  ★（）是为了提取匹配的字符串，表达式中有几个（）就有几个相应的匹配字符串；

  ★[]是定义匹配的字符串，eg：[A-Za-z0-9]表示字符串要匹配英文字母和数字；

  ★{}是用来匹配长度，eg：\s{3}代表匹配三个空格；

10、使用HTML5的方式验证表单：

●HTML5新增验证属性：

属性	描述
placeholder	提供一种提示（hint），输入域为空时显示，获得焦点输入内容后消失
required	规定输入域不能为空
pattern	规定验证input域的模式（正则表达式）

●validity属性：

属性	描述
valueMissing	表单元素设置了required特性，则为必填项。如果必填项的值为空，就无法通过表单验证，valueMissing属性会返回true，否则返回false。
typeMismatch	输入值与type类型不匹配。HTML 5新增的表单类型如email、number、url等，都包含一个原始的类型验证。如果用户输入的内容与表单类型不符合，则typeMismatch属性将返回true，否则返回false。
patternMismatch	输入值与pattern特性的正则表达式不匹配。如果输入的内容不符合pattern验证模式的规则，则patternMismatch属性将返回true，否则返回false。
tooLong	输入的内容超过了表单元素的maxLength 特性限定的字符长度。虽然在输入的时候会限制表单内容的长度，但在某种情况下，如通过程序设置，还是会超出最大长度限制。如果输入的内容超过了最大长度限制，则tooLong属性返回true，否则返回false。
rangeUnderflow	输入的值小于min特性的值。如果输入的数值小于最小值，则rangeUnderflow属性返回true，否则返回false。
rangeOverflow	输入的值大于max特性的值。如果输入的数值大于最大值，则rangeOverflow属性返回true，否则返回false。
stepMismatch	输入的值不符合step特性所推算出的规则。用于填写数值的表单元素可能需要同时设置min、max和step特性，这就限制了输入的值必须是最小值与step特性值的倍数之和。例如范围从0到10，step特性值为2，因为合法值为该范围内的偶数，其他数值均无法通过验证。如果输入值不符合要求，则stepMismatch属性返回true，否则返回false
customError	使用自定义的验证错误提示信息。使用setCustomValidity( )方法自定义错误提示信息：setCustomValidity(message)会把错误提示信息自定义为message，此时customError属性值为true；setCustomValidity("")会清除自定义的错误信息，此时customError属性值为false。