javascript的表单验证

为什么要表单验证

减轻服务器的压力

保证输入的数据符合要求

正则表达式

正则表达式描述了一种字符串匹配的模式，可以用来检查一个字符串是否含有某种字符串、将匹配的字符串替换或者从某个字符串中取出符合某个条件的字符串等。

正则表达式是由普通字符（例如字符 a 到 z）以及特殊字符（称为"元字符"）组成的文字模式。模式描述在搜索文本时要匹配的一个或多个字符串。

正则表达式作为一个模板，将某个字符模式与所搜索的字符串进行匹配。

正则表达式符号

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

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

定义正则表达式

普通方式

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

var reg=/white/;
var reg=/white/g;

构造函数

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

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

RegExp对象

RegExp对象的方法

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

RegExp对象的属性

属性	描述
global	全局匹配;找到所有匹配，而不是在第一个匹配后停止
ignoreCase	忽略大小写
multiline	多行; 将开始和结束字符（^和$）视为在多行上工作，而不只是只匹配整个输入字符串的最开始和最末尾处。

支持正则表达式的 String 对象的方法

String对象的方法

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

使用HTML5的方式验证表单

HTML5新增属性验证表单内容

validity属性：该属性的方法都是在DOM对象的基础上来使用的，所以在jQuery验证中获取值都是通过DOM对象来获取的。使用validity属性进行表单验证提示。

HTML5新增属性

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

示例：<input type="text" id="uName" placeholder="英文、数字长度为6-10个字符" required pattern="[a-zA-Z0-9]{6,10}"  />
<input type="password" id="pwd" placeholder="长度为6-16个字符" required pattern="[a-zA-Z0-9]{6,16}"/>

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。