HTML5表单验证

1.为什么要表单验证

减轻服务器的压力

保证输入数据符合要求

2.正则表达式

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

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

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

3.正则表达式符号

|-----------|-------------------------------------------|
| 符号 | 描述 |
| /.../ | 代表一个模式的开始和结束 |
| ^ | 匹配字符串的开始 |
| $ | 匹配字符串的结束 |
| \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}** |

4.定义正则表达式

普通方式

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

构造函数

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

RegExp对象

方法

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

属性

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

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

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

6.使用HTML5的方式验证表单

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

7.HTML5新增验证属性

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

8.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。 |

相关推荐
程序员黑豆2 小时前
Java类型推断完全指南:从var到菱形运算符,掌握使用限制与最佳实践
java·前端·ai编程
To_OC3 小时前
踩了个 TS 的坑之后,我终于把 type 和 interface 掰明白了
前端·react.js·typescript
GreenTea3 小时前
深度解读 Anthropic 多智能体报告:更强的模型 ≠ 更好的协调
前端·后端·算法
浮生望3 小时前
前端API工程化:用 Mock 数据与 Axios 配置实现独立于后端的并行开发
前端
万少4 小时前
给 DeepSeek Harness 装个"应用商店":一条命令,595 个插件随你逛
前端·javascript·后端
波波0074 小时前
C# 15 重磅新特性: 带标签 break 与 continue:重新定义嵌套循环控制流
服务器·前端·c#
Brown.alexis5 小时前
es6知识点1-自备使用
前端·ecmascript·es6
小爬的老粉丝5 小时前
JavaScript 纯前端预览 WPS:先识别容器,再路由解析器
前端·javascript·wps
计算机魔术师6 小时前
新兴多智能体系统的模式与问题
前端
用户059540174467 小时前
AI Agent 上下文污染踩坑实录:用 pytest + Redis 揪出 3 类记忆串号 bug,排查 6 小时
前端·css