表单验证
表单验证的优势
- 减轻服务器的压力
- 保证输入的数据符合要求
表单选择器
| 语 法 | 描 述 |
|---|---|
| :input | 匹配所有 input、textarea、select 和 button元素 |
| :text | 匹配所有单行文本框 |
| :password | 匹配所有密码框 |
| :radio | 匹配所有单选按钮 |
| :checkbox | 匹配所有复选框 |
| :submit | 匹配所有提交按钮 |
| :image | 匹配所有图像域 |
| :reset | 匹配所有重置按钮 |
| :button | 匹配所有按钮 |
| :file | 匹配所有文件域 |
| :hidden | 匹配所有不可见元素，或者 type=hidden 的表单元素 |
| :enabled | 匹配所有可用元素 |
| :disabled | 匹配所有不可用元素 |
| :checked | 匹配所有被选中元素(checkbox、radio、select 中的 option) |
| :selected | 匹配所有选中的 option 元素 |
表单验证事件和方法
| 类 别 | 名称 | 描述 |
|---|---|---|
| 事件 | onblur | 失去焦点，当光标离开某个文本框时触发 |
| onfocus | 获得焦点，当光标进入某个文本框时触发 | |
| 方法 | blur() | 从文本域中移开焦点 |
| focus() | 在文本域中设置焦点，即获得鼠标光标 | |
| select() | 选取文本域中的内容，突出显示输入区域的内容 |
正则表达式
正则表达式优势
- 简洁的代码
- 严谨的验证文本框中的内容
定义正则表达式
普通方式
语法 1
var regExp=/表达式/附加参数（只能表示具体的匹配）
eg:
var regExp=/white/;
var regExp=/white/g;
构造函数
语法 2
var regExp=new RegExp("表达式","附加参数");
eg:
var regExp=new RegExp("white");
var regExp=new RegExp("white","g");
复合模式
可以使用通配符表达更为抽象的规则模式
eg:
var reg=/^\w+$/;
var reg=/^\w+.[a-zA-Z]{2,3}$/;
...
RegExp 对象
RegExp 方法
| 方 法 | 描 述 |
|---|---|
| exec | 检索字符中是正则表达式的匹配，返回找到的值，并确定其位置 |
| test | 检索字符中指定的值，返回 true 或 false |
RegExp 属性
| 属 性 | 描 述 |
|---|---|
| global | RegExp 对象是否具有标志 g |
| ignoreCase | RegExp 对象是否具有标志 i |
| multiline | RegExp 对象是否具有标志 m |
String 对象的方法
| 方 法 | 描 述 |
|---|---|
| match | 找到一个或多个正则表达式匹配 |
| search | 检索与正则表达式相匹配的值 |
| replace | 替换与正则表达式匹配的字符串 |
| split | 把字符串分割为字符串数组 |
正则表达式符号
| 符 号 | 描 述 |
|---|---|
| /…/ | 代表一个模式的开始和结束 |
| ^ | 匹配字符串的开始 |
| $ | 匹配字符串的结束 |
| \s | 任何空白字符（Tab、空格、Enter 等） |
| \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 } |
HTML5 新增验证属性
| 属 性 | 描 述 |
|---|---|
| placeholder | 提供一种提示（hint），输入域为空时显示，获得焦点输入内容后消失 |
| required | 规定输入域不能为空 |
| pattern | 规定验证 input 域的模式（正则表达式） |
validity 属性
validityState 对象
| 属 性 | 描 述 |
|---|---|
| valueMissing | 表单元素设置了 required 特性，则为必填项。如果必填项的值为空，就无法通过表单验证，valueMissing 属性会返回 true，否则返回 false |
| typeMismatch | 输入值与 type 类型不匹配。HTML5 新增的表单类型如 email、number、url等，都包含一个原始的类型验证。如果用户输入的内容与表单类型不符合，则typeMismatch 属性则返回 true，否则返回 false |
| patternMismatch | 输入值与 pattern 特性的正则表达式不匹配。如果输入的内容不符合 pattern 验证模式的规则，则 patternMismatch 属性将返回 true，否则返回 false |
| tooLong | 输入的内容超过了表单元素的 maxLength 特性限定的字符长度 |
| rangeUnderflow | 输入的值小于 min 特性的值。如果输入的数值小于最小值，则返回 true，反之 false |
| rangeOverflow | 输入的值大于 max 特性的值。 |
| stepMismatch | 输入的值不符合 step 特性所推算出的值。用于填写数值的表单元素可能需要同时设置 min 、max 和 step 特性，这就限制了输入的值必须是最小值与 step 特性值的倍数之和 |
| customError | 使用自定义的验证错误提示信息。使用 setCustomValidity() 方法自定义错误提示信息：setCustomValidity(message) 会把错误提示信息自定义为 message，此时 customError 属性值为 true；setCustomValidity(" ") 会清除自定义的错误信息，此时 customError 属性值为 false |
归纳
本文地址：https://blog.csdn.net/CSDN_chenyang/article/details/107496460
