HTML5约束验证（一）

弥迩

已于 2023-03-27 04:44:37 修改

阅读量522

点赞数

分类专栏：笔记 Web前端文章标签： html5 javascript html 前端

于 2023-03-27 02:26:22 首次发布

本文链接：https://blog.csdn.net/qq_45007120/article/details/129787608

版权

文章目录

前言
- 前提概念
约束验证（Constraint validation）
小结

前言

涉及内容：

HTML5约束验证的<input>部分。

技能掌握：

HTML
- 部分HTML表单属性
- 部分HTML事件
- 部分DOM方法
- …
JavaScript
- console对象
- if/else语句
- …

前提概念

表单约束

是什么？

对用户输入的表单数据进行限制

为什么？

更好的获取有意义的用户数据
为用户提高更佳的浏览体验

怎么办？

内在约束（intrinsic constraint）即，为 <input>标签的 type 属性选择合适的值。如：
```

<input type="email">
```

基本约束（basic constraint）即，设置具有限制性的属性值。如：

<!-- 将此设置为必填项 -->
<input type="email" required>
<!--或
<input type="email" required="required">
 -->

友好的提示表单设置的约束。如：

<input type="email" placeholder="请输入正确的邮箱地址哦">

表单数据校验

是什么？

校验用户输入的表单数据是否符合网页的预期。

为什么？

保证网站后续应用程序的正常运行
对用户数据进行保护
保护网站的安全

怎么办？

客户端校验
- JavaScript校验（即，程序员自定义校验方式）
- HTML5内置表单校验（即，浏览器根据HTML5规范所内置的API）
服务端校验

… …

比较：（JavaScript校验 VS HTML5内置校验）

JavaScript校验灵活性更佳

HTML5内置校验性能更佳

HTML5内置表单校验

是什么？

HTML5中对用户的输入数据校验，使用表单元素的校验属性来实现。（可以不用写任何脚本代码）

为什么？

提升网站的性能，提高用户体验
一定程度上保证用户的数据安全以及网站的安全
提高表单的可用性

怎么办？

约束验证

约束验证（Constraint validation）

概念

对表单以及表单中每个控件设置更复杂的限制（约束），并验证用户输入控件的数据是否符合限制；同时，提供给用户更清晰的验证失败提示（与浏览器默认提示对比）。

约束 + 验证 + 提示

方式

注：下列内容主要涉及第一种方式（因为示例的需要所有会使用到JavaScript），且只对<input>标签的操作。

HTML5自带的关于表单验证的接口
JavaScript结合约束验证API进行复杂的约束，即使用表单的事件触发JavaScript
约束验证的可视化提示，即使用CSS对用户进行反馈操作

基本原理

注：此处更多涉及如何操作表单DOM来实现约束验证。

操作表单DOM
设置表单自身

查看约束

注：此处以<input>标签为例，因此使用的是，表单DOM中的HTMLInputElement接口所拥有的属性和方法（下列的属性和方法并不是<input>标签独有的），包括：validity、validationMessage、willValidate、setCustomValidity()、checkValidity()。

`validity`属性

作用

表示<input>标签可以拥有的约束，且这些约束此时的有效性情况。
状态

只读

返回值

ValidityState [object | 只读]

属性名	属性值	描述
`badInput`	`Boolean`	`true`：用户输入了浏览器无法转换的值；`false`：满足约束
`customError`	`Boolean`	`true`：使用`setCustomValidity ()`方法设置自定义提示信息（信息不是空字符串）；`false`：没有使用`setCustomValidity ()`方法设置自定义提示信息
`patternMismatch`	`Boolean`	`true`：输入值不符合`pattern`属性值的规定；`false`：符合`pattern`属性值的规定
`rangeOverflow`	`Boolean`	`true`：输入值大于`max`属性值；`false`：小于或等于`max`属性值
`rangUnderflow`	`Boolean`	`true`：输入值小于`min`属性值；`false`：大于或等于`min`属性值
`stepMismatch`	`Boolean`	`true`：输入值不符合`step`属性值的规定；`false`：符合`step`属性值的规定（`step`表示步长）
`tooLong`	`Boolean`	`true`：输入值大于`maxlength`属性值；`false`：小于或等于`maxlength`属性值
`tooShort`	`Boolean`	`true`：输入值小于`minlength`属性值；`false`：大于或等于`minlength`属性值
`typeMismatch`	`Boolean`	`true`：输入值不符合`type`属性值的规定；`false`：符合`type`属性值的规定
`valid`	`Boolean`	`true`：输入值符合所有属性的规定；`false`：输入值不符合任意一个属性的规定
`valueMissing`	`Boolean`	`true`：不符合`required`属性的规定（即，没有输入值）；`false`：符合`required`属性的规定

语法
```
HTMLInputElement.validity
```

示例

badInput为true，即，用户输入了浏览器无法转换的值。

<!-- 此处添加一个onblur事件，方便进行测试 -->
<!-- 此处若输入“3.1415926-99999999”时，badInput将会返回true -->
<form>
    <label>年龄</label>
    <input type="number" id="age" onblur="checkBlur(this)" />
    <input type="submit" value="提交">
</form>

var test = document.getElementById("age");
console.log(test.validity);  //查看有效性状态
//查看badInput属性值
function checkBlur(test) {
       
    if (test.validity.badInput) {
       
        console.log("Bad input detected！检测到错误的输入！");
    } else {
       
        console.log("Content of input OK!输入无误！");
    }
}

在这里插入图片描述

customError为true，即，使用setCustomValidity ()方法设置不满足约束时的自定义提示信息（信息建议不是空字符串）

<!-- 此处添加一个onblur事件，方便进行测试 -->
<!-- 此处继续输入“3.1415926-99999999”，使badInput返回true，来查看自定义的信息 -->
<form>
    <label>年龄</label>
    <input type="number" id="age" onblur="checkBlur(this)" />
    <input type="submit" value="提交">
</form>

var test = document.getElementById("age");
var validityState =  test.validity;

console.log(validityState);  //查看有效性状态

function checkBlur(test) {
       
    if (validityState.badInput) {
       
        test.setCustomValidity("请输入正确的年龄！");//设置自定义的错误提示信息
        console.log("Bad input detected！检测到错误的输入！");//用户输入错误时，控制台的提示
        console.log(test.validationMessage);//在控制台查看，错误提示信息
        console.log(validityState.customError);//查看customError属性值
    } else {
       
        console.log("Content of input OK!输入无误！");
    }
    test.reportValidity();//将错误提示信息呈现到页面，用来提醒用户
}

注：

validationMessage 表示用户输入不符合约束时，浏览器的错误提示信息。详情见下文的validationMessage属性。
reportValidity()表示将浏览器的错误提示信息显示给用户。详情见下文的reportValidity()方法。

在这里插入图片描述

patternMismatch为true，即，不符合正则表达式的要求。

<!-- 此处添加一个onblur事件，方便进行测试 -->
<!-- 此处输入“1”，使 patternMismatch 返回true -->
<form>
    <label>电话</label>
    <input type="tel" id="tel" onblur="checkBlur(this)" pattern="[0-9]{11}"/>
    <input type