表单校验及正则表达式

表单选择器

基础表单选择器

jQuery 提供了专用于选取表单元素的选择器。

常见的表单选择器
选择器                                                描述
:input                匹配所有的 input、textarea、select、button 元素。
:text                  匹配所有的单行文本框。
:password        匹配所有的密码框。
:radio               匹配所有的单选框。
:checkbox        匹配所有的多选框。
: submit            匹配所有的提交按钮。
:reset                匹配所有的重置按钮。
:button              匹配所有的普通按钮。
:image              匹配所有的图像域。
:file                   匹配所有的文件域。

表单属性过滤选择器

jQuery 针对表单元素的属性提供了表单元素属性过滤选择器。

常见的表单属性过滤选择器
选择器                     描述
:enabled         匹配所有可用元素，
:disabled        匹配所有禁用元素
:checked        匹配所有被选中元素，如单选框、复选框、下拉列表
:selected        匹配 select 所选中的 option 元素。

正则表达式

正则表达式定义

正则表达式(Regular Expression)又称为规则表达式，是  对字符串执行模式匹配的强大工具。使用正则表达式，可以快速验证邮箱格式、手机号格式、身份证号码格式等

基本用法

var reg =/正则表达式规则/附加参数:
var reg= new RegExp(正则表达式规则，附加参数);

正则表达式使用

String 对象正则表达式验证

var str=“要操作的字符串":
//检索字符串中与正则表达式匹配的值，返回一个匹配结果数组str.match(正则表达式);
// 检索字符串中第一个与正则表达式相匹配的字符串的起始位置str.search(正则表达式);
// 替换与正则表达式匹配的字符串
str.replace(正则表达式，替换内容);
//将字符串按照separator为边界，分割成字符串数组
str.split(separator);

RegExp 对象正则表达式验证

var reg= new RegExp(正则表达式规则，附加参数);
// 检索字符串中是否含有匹配的文本
reg.test(字符串);
// 检索字符串中包含的匹配文本
reg.exec(字符串);

HTML5 表单校验

HTML5 表单新增属性

HTML5 新增的表单验证属性:placeholder、required、pattern。
validity 属性应用
当为表单元素添加验证属性 required 和 pattern 后，可以通过 HTML5 提供的 Validitystate 对象获取当前验证属性的验证状态
validity 属性的基本用法
var validityState = document.getElementById("input").validity;
ValidityState 对象通过 validity 属性获取，其包含八个属性

ValidityState对象常见的属性

属性                                           描述
valueMissing                表单的值为空，返回true.
typeMismatch              输入的内容与表单类型不匹配，返回true。
patternMismatch          输入的内容与表单正则规则不匹配，返回true。
tooLong                        输入的内容超过表单限定的长度，返回true。
rangeUnderflow           输入的内容小于 min 值，返回 true。
rangeOverflow             输入的内容打于 max值，返回 true。
stepMismatch              输入的内容不符合 step 特性所推算的规则时，返回true。
custonError                 存在自定义错误信息时，返回true。

 

修改表单校验提示的基本用法

document.getElementById("input").setcustomValidity("提示”);

表单校验总结

表单验证手段
常见的表单验证手段
使用 JavaScript 实现简单的非空校验。
使用 JavaScript 实现简单的数据类型校验(如 isNaN)
使用 JavaScript 实现简单的长度校验(如 length 属性验证长度)、格式校验(如 index0f 验证。
邮箱格式)。
使用正则表达式实现复杂校验(如邮箱格式验证、手机格式验证)
为表单元素添加 type 属性，限定表单元素的输入类型。
为表单元素添加 required 属性，限定表单元素不能为空,
为表单元素添加 pattern 属性，实现正则表达式校验。
结合 ValidityState 对象和 setCustomValidity 方法，对表单校验进行友好提示。

表单验证方式对比

JavaScript 校验、正则表达式校验、HTML5 校验的对比
        使用 JavaScript 提供的属性和方法可以便捷地对表单内容进行简单的校验，但是在校验准确性上明显存在很大的不足。
        使用正则表达式可以准确地对表单内容进行校验，如邮箱、身份证号码等。
        使用 HTML5 新增的表单验证属性可以轻松的实现表单内容校验，一定程度上减少了 javaScript 编码，但是在特定的验证属性中仍需要和正则表达式结合使用。