使用jQuery快速高效制作网页交互特效、第九章

表单验证

一：表单基本验证技术
1、表单验证的必要性

• 减轻服务器端的压力，避免服务器端的信息出现错误。

2、表单验证的内容

• 检查表单元素是否为空
• 验证是否为数字
• 验证用户输入的邮件地址是否有效
• 检查用户输入的数据是否在某个范围之内
• 验证用户输入的信息长度是否足够
• 检查用户输入的出生日期是否有效
  3、表单验证的思路
  ①首先获取表单元素的值，这些值一般是String类型，包含数字、下划线等。
  ②使用JavaScript中的一些方法对获取的String类型的数据进行判断。
  ③表单form有一个事件onsubmit，它是在提交表单之前调用的，因此可以在提交表单时触发onsubmit事件，然后对获取的数据进行验证。

---

二：表单选择器
1、表单选择器简介
表单选择器就是用来选择文本输入框、按钮等表单元素的。

表单选择器

表单属性过滤器

2、验证表单内容
使用String对象验证邮箱：
用indexOf(“符号”)==-1检测是否包含符号，若不包含则表达式返回-1。
3、校验提示特效
①表单验证事件和方法
表单验证常用的方法和事件：

---

三：正则表达式
1、为什么需要正则表达式
使验证更加严谨！
2、什么是正则表达式

• 正则表达式是一个描述字符模式的对象，它是由一些特殊的符号组成的，这些符号和在SQLServer中的通配符一样，其组成的字符模式用来匹配各种表达式。
• RegExp对象是Regular Expression（正则表达式）的缩写，它是对字符串执行模式匹配的强大工具。简单的模式可以是一个单独的字符，复杂的模式包括了更多的字符。

①定义正则表达式
（1）普通方式
语法：

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

• 表达式：一个字符串代表了某种规则，其中可以使用某些特殊字符来代表特殊的规则。
• 附加参数：

g:代表可以进行全局匹配
i:代表不区分大小写匹配
m:代表可以进行多行匹配

（2）构造函数
语法：

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

普通方式中的表达式必须是一个常量字符串，而构造函数中的表达式可以是常量字符串，也可以是一个JavaScript变量

②表达式的模式
（1）简单模式
只能表示具体的匹配。
（2）复合模式
表达抽象化的规则模式
RegExp对象

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

正则表达式对象实例.test(字符串)

如果字符串中含有与正则表达式匹配的文本，则返回true；否则返回false。
String对象的方法

match()方法
在字符串内检索指定的值，找到一个或多个正则表达式的匹配。
语法：

字符串对象.match(searchString或regexpObject)

searchString是要检索的字符串的值，regexpObject是规定要匹配模式的RegExp对象

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

字符串对象.replace(RegExp对象或字符串,"替换的字符串")

如果设置了全文搜索，则符合条件的RegExp或字符串都将被替换；否则只替换第一个，返回替换后的字符串。

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

字符串对象.split(分隔符,n)

分隔符可以是字符串，也可以是正则表达式。n为限制输出数组的个数，为可选项，如果不设置n，则返回包含整个字符串的元素数组。

RegExp对象的属性

• global属性用于返回正则表达式是否具有标志g，它声明了给定的正则表达式是否执行全局匹配，如果g标志被设置，则该属性为true；否则为false。
• ignoreCase属性用于返回正则表达式是否具有标志i，它声明了给定的正则表达式是否执行忽略大小写，如果i标志被设置，则该属性为true；否则为false。
• multiline属性用于返回正则表达式是否具有标志m，它声明了给定的正则表达式是否执行以多行模式执行模式匹配，如果m标志被设置，则该属性为true；否则为false。

正则表达式的常用符号

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

正则表达式的重复字符

正则表达式中(),[]和{},区别如下：
() 是为了提取匹配的字符串，表达式中有几个()就有几个相应的匹配字符串。
[] 是定义匹配的字符串，如[A-Za-z0-9]表示字符串要匹配英文字符和数字。
{} 用来匹配长度，如\s{3}表示匹配三个空格。

---

四：使用HTML5的方式验证表单
1、HTML5新增属性

①placeholder
告诉用户应该在此输入框中输入什么内容，当用户在输入框中输入内容时提示信息自动消失。
②required
提交表单时会自动验证表单元素是否为空，如果为空则自动给出提示。
③pattern
用于验证输入框中用户输入内容是否与自定义的正则表达式相匹配，该属性要求用户指定一个正则表达式，验证时要求用户输入的内容必须符合正则表达式所指定的规则。
2、validity属性
validity属性可以获取表单元素的validityState对象
语法：

var validityState=document.getElementById("uName").validity;

validityState对象包括八个属性，分别针对八个方面的错误验证。