数据验证
确保正确的用户输入
典型的验证任务是：
- 用户是否已填写所有必需的字段？
- 用户是否已输入有效的日期？
- 用户是否在数字字段中输入了文本？
服务器端验证是由 web 服务器执行的，在输入被送往服务器之后。
客户端验证是由 web 浏览器执行的，在输入被送往 web 服务器之前。
HTML 约束验证
HTML 输入属性，CSS 伪选择器，DOM 属性和方法
HTML5 引入的验证概念——约束验证（constraint validation）
约束验证 HTML 输入属性
表单元素，主要指 input标签 的 属性
| 属性 | 描述 | 补充笔记 |
|---|---|---|
| type | 规定 input 元素的类型 | |
| value | 规定输入字段的初始值 | value= "值" |
| max 或 min | 规定 input 元素的最大或小值 | max = "Number" input：number |
| readonly | 规定输入字段为只读（不能修改） | readonly |
| disabled | 规定 input 元素被禁用 不可用，不可点击，不会被提交 |
disabled |
| required | 规定输入字段需要某个元素 | required |
| autofocus | 页面加载时自动获得焦点 | autofocus |
| autocomplete | 当自动完成开启，浏览器会基于用户之前的输入值自动填写值 | autocomplete="on" autocomplete="off" form input：text、search、url、tel、email、password、datepickers、range 以及 color。 |
| size | 规定input的尺寸（以字符计） | size="正整数" 默认为20 input：text 不会限制用户输入的多少 |
| maxlength | 规定输入字段允许的最大长度 | 限制用户输入的多少 不会提供反馈(手写JS代码提醒用户) |
| pattern | 规定 input 元素的值模式 | |
| form | input所属的一个或多个表单 | form="formId1" |
| formaction | ||
| formenctype | ||
| formmethod | ||
| formnovalidate | ||
| formtarget | ||
| height 和 width | ||
| list | ||
| multiple | ||
| pattern (regexp) | ||
| placeholder | ||
| step |
详解 readonly 和 disabled
约束验证 CSS 伪选择器
| 选择器 | 描述 |
|---|---|
| :disabled | 选择设置了 "disabled" 属性的 input 元素 |
| :invalid | 选择带有无效值的 input 元素 |
| :optional | 选择未设置 "required" 属性的 input 元素 |
| :required | 选择设置了 "required" 属性的 input 元素 |
| :valid | 选择带有有效值的 input 元素 |
约束验证 DOM 属性 和 方法
方法
| 属性 | 描述 |
|---|---|
| checkValidity() | 返回 true，如果 input 元素包含有效数据 |
| setCustomValidity() | 设置 input 元素的 validationMessage 属性 |
属性
| 属性 | 描述 |
|---|---|
| validity | 包含与 input 元素的合法性相关的布尔属性。 |
| validationMessage | 包含当 validity 为 false 时浏览器显示的消息。 |
| willValidate | 指示是否验证 input 元素。 |
validity属性包含的一系列属性
| 属性 | 描述 |
|---|---|
| customError | 设置为 true，如果设置自定义的合法性消息。 |
| patternMismatch | 设置为 true，如果元素值不匹配其 pattern 属性。 |
| rangeOverflow | 设置为 true，如果元素值大约其 max 属性。 |
| rangeUnderflow | 设置为 true，如果元素值小于其 min 属性。 |
| stepMismatch | 当字段拥有 step 属性，且输入的 value 值不符合设定的间隔值时，该属性值为 true。 |
| tooLong | 设置为 true，如果元素值超过了其 maxLength 属性。 |
| typeMismatch | 当字段的 type 是 email 或者 url 但输入的值不是正确的类型时，属性值为 true。 |
| valueMissing | 设置为 true，如果元素（包含 required）没有值。 |
| valid | 设置为 true，如果元素值是有效的。 |
网友评论