表单校验

1.表单基本验证技术

1. 表单验证必要性
   减少用户输入无效或错误的数据，从而减轻服务器端的压力，避免服务器端的信息出现错误。
2. 表单验证的内容
   • 检查表单元素是否为空
   • 验证是否为数字
   • 验证邮件地址是否有效
   • 验证手机号码是否正确等

2.表单选择器

表单选择器简介

表单选择器

语法	描述
:input	匹配所有input元素
:text	匹配所有单行文本框
:password	匹配所有密码框
:radio	匹配所有单选按钮
:checkbox	匹配所有复选框
:submit	匹配所有提交按钮
:image	匹配所有图像域
:reset	匹配所有重置按钮
:button	匹配所有按钮
:file	匹配所有文件域
:hidden	匹配所有不可见元素

表单属性过滤器

语法	描述
:enabled	匹配所有可用元素
:disabled	匹配所有不可用元素
:checked	匹配所有被选中元素
:selected	匹配所有选中的option元素

校验提示特效

表单验证事件和方法

事件	方法
onblur 失去焦点	blur() 从文本域中移开焦点
onfocus 获得焦点	focus() 在文本域中设置焦点，即获得光标
	select() 获取文本域中的内容，突出显示输入区域的内容

3.正则表达式

什么是正则表达式

正则表达式是一个描述字符模式的对象，它是由一些特殊的符号组成的，其组成的字符模式用来匹配各种表达式。
定义正则表达式

//普通方式
var reg = /表达式/附加参数;  
//构造函数
var reg = new RegExp("表达式","附加参数");
//表达式：一个字符串代表了某种规则，其中可以使用某些特殊字符来代表特殊的规则  
//附加参数：扩展表达式的含义

表达式的模式

//简单模式：指通过普通字符的组合来表达的模式
var reg = /china/;
//复合模式： 指含有通配符来表达的模式
var reg = /^\w+$/;

RegExp对象

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

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

String 对象的方法

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

//march方法
字符串对象.match(searchString或regexpObject);  //searchString是要检索的字符串的值,regexObject是规定要匹配模式的RegExp对象
//replace方法
字符串对象.replace(RegExp对象或字符串,"替换的字符串");  //如果设置了全文搜索，则符合条件的RegExp或字符串都将被替换，否则只替换一个，返回替换后的字符串
//split方法
字符串对象.split(分隔符,n);  //分隔符可以是字符串，也可以是正则表达式

RegExp对象的属性

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

正则表达式的常用符号

符号	描述
/…/	代表一个模式的开始和结束
^	匹配字符串的开始
$	匹配字符串的结束
\s	任何空白字符
\S	任何非空白字符
\d	匹配一个数字字符
\D	除了数字之外的任何字符
\w	匹配一个数字、下划线、字母字符
\W	任何非单字字符
.	除了换行符之外的任意字符

正则表达式的重复字符

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

4.使用HTML5验证表单

HTML5新增属性

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

validity属性

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

validityState对象

属性	描述
valueMissing	表单元素设置required特性，则为非空，如果非空项的值为空，valueMissing属性就会返回true否则返回false
typeMismatch	判断输入的值和type类型匹配不匹配，如果用户输入的内容与表单类型不符合，则typeMismatch属性就会返回true否则返回false
patternMismatch	用于输入的值与pattern特性进行匹配，如果输入的内容不符合pattern验证模式规则，则patternMismatch返回true否则返回false
tooLong	tooLong属性用于输入的内容长度是否超过maxlength特性限定的字符长度，虽然在输入的时候会限制表单内容长度，但是如果在某种情况下是通过程序设置，还是会超过最大长度限制。如果超出了就返回true否则返回false
RangeUnderflow	RangeUnderflow属性用于判断用户输入的数值是否小于min特性的值，如果小于则返回true否则返回false
rangeOverflow	rangeOverflow属性用于判断用户输入的数值是否大于max特性的值，如果大于返回true否则返回false
stepMismatch	stepMismatch用于判断输入的值符不符合step特性所推算出的规则，填写熟知的表单元素可能需要同时设置min、max、step特性。限制了输入的值必须是最小值与step特性值得倍数之和
customError	自定义提示错误验证信息。使用setCustomValidity()方法自定义错误提示信息