1.表单基本验证技术
- 表单验证必要性
减少用户输入无效或错误的数据,从而减轻服务器端的压力,避免服务器端的信息出现错误。 - 表单验证的内容
- 检查表单元素是否为空
- 验证是否为数字
- 验证邮件地址是否有效
- 验证手机号码是否正确等
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()方法自定义错误提示信息 |