【Web 表单】与用户数据打交道-2(mdn笔记)
8. UI 伪类
8.1 都有什么样的伪类？
我们可以使用的（截至 CSS 2.1）与表单相关的原始伪类是：
:hover：只在鼠标指针悬停在一个元素上时选择该元素。
:focus：只在元素被聚焦时选择该元素（也就是说，通过键盘上的 tab 键选中该元素）。
:active：只在元素被激活时选择该元素（也就是说，通过点击或键盘上的 Return / Enter 键选中该元素）。
CSS Selector Level 3 和 CSS Basic UI Level 3 增加了更多与 HTML 表单有关的伪类.简单地说，我们要看的主要内容是：
:required 和 :optional：针对必需的或可选的表单控件。
:valid 和 :invalid、:in-range 和 :out-of-range：针对表单控件，根据对其设置的表单验证约束，或范围内/范围外，是有效/无效的。
:enabled 和 :disabled、:read-only 和 :read-write：针对启用或禁用的表单控件（例如，设置了 disabled HTML 属性），以及读写或只读的表单控件（例如，设置了 readonly HTML 属性）。
:checked、:indeterminate 和 :default：分别针对被选中的复选框和单选按钮，处于不确定的状态（既不被选中也不被选中），以及页面加载时默认选择的选项（例如，一个设置了 checked 属性的 ，或者一个设置了 selected 属性的
备注：这里讨论的许多伪类都是关于根据表单控件的验证状态（它们的数据是否有效？）你会在我们的下一篇文章客户端表单验证中学习到更多关于设置和控制验证约束的知识，但现在我们将保持关于表单验证的简单内容，以便不会混淆。
8.2 根据必需与否为输入控件添加样式
一个表单输入是必需的（在提交表单之前必须填写）还是可选的。
、
body {
font: 1em sans-serif; /* 字体大小为1em，字体族为sans-serif */
padding: 0; /* 内边距为0 */
margin: 0; /* 外边距为0 */
}
form {
max-width: 200px; /* 最大宽度为200像素 */
margin: 0; /* 外边距为0 */
padding: 0 5px; /* 内边距为5像素左右，0像素上下 */
}
/* 选择了所有作为 p 元素直接子元素的 label 元素 */
p > label {
display: block; /* 显示为块级元素 */
}
input[type="text"],
input[type="email"],
input[type="number"],
textarea,
fieldset {
/* 需要在基于 WebKit 的浏览器上对表单元素进行恰当的样式设置 */
-webkit-appearance: none; /* 取消默认外观 */
width: 100%; /* 宽度为100% */
border: 1px solid #333; /* 边框为1像素宽，实线，颜色为深灰色 */
margin: 0; /* 外边距为0 */
font-family: inherit; /* 继承父元素的字体族 */
font-size: 90%; /* 字体大小为90% */
-moz-box-sizing: border-box; /* 在 Firefox 浏览器中，盒模型为border-box */
box-sizing: border-box; /* 盒模型为border-box */
}
input:invalid {
box-shadow: 0 0 5px 1px red; /* 阴影为红色，向右下偏移5像素，模糊半径为1像素 */
}
input:focus:invalid {
outline: none; /* 取消轮廓线 */
}自定义错误信息
每次我们提交无效的表单数据时，浏览器总会显示错误信息。但是显示的信息取决于你所使用的浏览器。
这些自动生成的错误有两个缺点：
没有标准可以让 CSS 来改变他们的界面外观。
这依赖于他们使用的浏览器环境，意味着你可能在这种语言的页面里得到另一种语言的错误提示。
要自定义这些消息的外观和文本，你必须使用 JavaScript; 不能使用 HTML 和 CSS 来改变。
HTML5 提供 constraint validation API 来检测和自定义表单元素的状态。他可以改变错误信息的文本:
看一个例子:
var email = document.getElementById("mail"); // 获取 id 为 "mail" 的元素
email.addEventListener("input", function (event) { // 为 email 元素添加 input 事件监听器
if (email.validity.typeMismatch) { // 如果 email 元素的值不符合类型要求
email.setCustomValidity("I expect an e-mail, darling!"); // 设置自定义验证信息
} else { // 否则
email.setCustomValidity(""); // 清除自定义验证信息
}
});9.3 使用 JavaScript 校验表单
如果你想控制原生错误信息的界面外观，或者你想处理不支持 HTML 内置表单校验的浏览器，则必须使用 Javascript。
约束校验的 API
越来越多的浏览器支持限制校验 API，并且这逐渐变得可靠。
这些 API 由成组的方法和属性构成，可在特定的表单元素接口上调用：
HTMLButtonElement
HTMLFieldSetElement
HTMLInputElement
HTMLOutputElement (en-US)
HTMLSelectElement
HTMLTextAreaElement
约束校验的 API 及属性
| 属性 | 描述 |
|---|---|
| validationMessage | 一个本地化消息，描述元素不满足校验条件时（如果有的话）的文本信息。如果元素无需校验（willValidate 为 false），或元素的值满足校验条件时，为空字符串。 |
| validity | 一个 ValidityState 对象，描述元素的验证状态。详见有关可能的验证状态的文章。 |
| validity.customError | 如果元素设置了自定义错误，返回 true ；否则返回false。 |
| validity.patternMismatch | 如果元素的值不匹配所设置的正则表达式，返回 true，否则返回 false。当此属性为 true 时，元素将命中 :invalid CSS 伪类。 |
| validity.rangeOverflow | 如果元素的值高于所设置的最大值，返回 true，否则返回 false。当此属性为 true 时，元素将命中 :invalid CSS 伪类。 |
| validity.rangeUnderflow | 如果元素的值低于所设置的最小值，返回 true，否则返回 false。当此属性为 true 时，元素将命中 :invalid CSS 伪类。 |
| validity.stepMismatch | 如果元素的值不符合 step 属性的规则，返回 true，否则返回 false。当此属性为 true 时，元素将命中 :invalid CSS 伪类。 |
| validity.tooLong | 如果元素的值超过所设置的最大长度，返回 true，否则返回 false。当此属性为 true 时，元素将命中 :invalid CSS 伪类。 |
| validity.typeMismatch | 如果元素的值出现语法错误，返回 true，否则返回 false。当此属性为 true 时，元素将命中 :invalid CSS 伪类。 |
| validity.valid | 如果元素的值不存在校验问题，返回 true，否则返回 false。当此属性为 true 时，元素将命中 :valid CSS 伪类，否则命中 :invalid CSS 伪类。 |
| validity.valueMissing | 如果元素设置了 required 属性且值为空，返回 true，否则返回 false。当此属性为 true 时，元素将命中 :invalid CSS 伪类。 |
| willValidate | 如果元素在表单提交时将被校验，返回 true，否则返回 false。 |
约束校验 API 的方法
| 方法 | 描述 |
|---|---|
| checkValidity() | 如果元素的值不存在校验问题，返回 true，否则返回 false。如果元素校验失败，此方法会触发 invalid 事件。 |
| HTMLFormElement.reportValidity() | 如果元素或它的子元素控件符合校验的限制，返回 true . 当返回为 false 时，对每个无效元素可撤销 invalid 事件会被唤起并且校验错误会报告给用户。 |
| setCustomValidity(message) | 为元素添加一个自定义的错误消息；如果设置了自定义错误消息，该元素被认为是无效的，则显示指定的错误。这允许你使用 JavaScript 代码来建立校验失败，而不是用标准约束校验 API 所提供的。这些自定义信息将在向用户报告错误时显示。如果参数为空，则清空自定义错误。 |
对于旧版浏览器，可以使用 polyfill（例如 Hyperform），来弥补其对约束校验 API 支持的不足。既然你已经使用 JavaScript，在您的网站或 Web 应用程序的设计和实现中使用 polyfill 并不是累赘。
使用约束校验 API 的例子
使用这个 API 来构建自定义错误消息。
表单使用 novalidate 属性关闭浏览器的自动校验.这允许我们使用脚本控制表单校验。
这并不禁止对约束校验 API 的支持或是以下 CSS 伪类：:valid、:invalid、:in-range 、:out-of-range 的应用。
aria-live (en-US) 属性确保我们的自定义错误信息将呈现给所有人，包括使用屏幕阅读器等辅助技术的人。
以下 CSS 样式使我们的表单和其错误输出看起来更有吸引力:
/* 仅为了使示例更好看 */
body {
font: 1em sans-serif; /* 字体大小为1em，字体族为sans-serif */
padding: 0; /* 内边距为0 */
margin: 0; /* 外边距为0 */
}
form {
max-width: 200px; /* 最大宽度为200像素 */
}
p * {
display: block; /* 显示为块级元素 */
}
input[type="email"] {
-webkit-appearance: none; /* 取消默认外观 */
width: 100%; /* 宽度为100% */
border: 1px solid #333; /* 边框为1像素宽，实线，颜色为深灰色 */
margin: 0; /* 外边距为0 */
font-family: inherit; /* 继承父元素的字体族 */
font-size: 90%; /* 字体大小为90% */
-moz-box-sizing: border-box; /* 在 Firefox 浏览器中，盒模型为border-box */
box-sizing: border-box; /* 盒模型为border-box */
}
/* 校验失败的元素样式 */
input:invalid {
border-color: #900; /* 边框颜色为深红色 */
background-color: #fdd; /* 背景颜色为浅红色 */
}
input:focus:invalid {
outline: none; /* 取消轮廓线 */
}
/* 错误消息的样式 */
.error {
width: 100%; /* 宽度为100% */
padding: 0; /* 内边距为0 */
font-size: 80%; /* 字体大小为80% */
color: white; /* 文本颜色为白色 */
background-color: #900; /* 背景颜色为深红色 */
border-radius: 0 0 5px 5px; /* 边框圆角半径，左上角和右上角为0，左下角和右下角为5像素 */
-moz-box-sizing: border-box; /* 在 Firefox 浏览器中，盒模型为border-box */
box-sizing: border-box; /* 盒模型为border-box */
}
.error.active {
padding: 0.3em; /* 内边距为0.3em */
}以下 JavaScript 代码演示如何设置自定义错误校验:
// 有许多方式可以获取 DOM 节点；在此我们获取表单本身和
// email 输入框，以及我们将放置错误信息的 span 元素。
var form = document.getElementsByTagName("form")[0];
var email = document.getElementById("mail");
var error = document.querySelector(".error");
email.addEventListener(
"input",
function (event) {
// 当用户输入信息时，校验 email 字段
if (email.validity.valid) {
// 如果校验通过，清除已显示的错误消息
error.innerHTML = ""; // 重置消息的内容
error.className = "error"; // 重置消息的显示状态
}
},
false,
);
form.addEventListener(
"submit",
function (event) {
// 当用户提交表单时，校验 email 字段
if (!email.validity.valid) {
// 如果校验失败，显示一个自定义错误
error.innerHTML = "I expect an e-mail, darling!";
error.className = "error active";
// 还需要阻止表单提交事件，以取消数据传送
event.preventDefault();
}
},
false,
);
约束校验 API 为您提供了一个强大的工具来处理表单校验，让您可以对用户界面进行远超过仅仅使用 HTML 和 CSS 所能得到的控制。
不使用内建 API 时的表单校验
有时，例如使用旧版浏览器或自定义小部件 (en-US)，您将无法（或不希望）使用约束校验 API。
可以使用 JavaScript 来校验您的表单。校验表单比起真实数据校验更像是一个用户界面问题。
我应该进行什么样的校验？
你需要确定如何校验你的数据：字符串操作，类型转换，正则表达式等。
如果表单校验失败，我该怎么办？
您必须决定表单的行为方式：表单是否发送数据？是否突出显示错误的字段？是否显示错误消息？
如何帮助用户纠正无效数据？
您应该提供前期建议，以便他们知道预期的输入是什么以及明确的错误消息。
不使用约束校验 API 的例子
CSS 也不需要太多的改动，我们只需将 :invalid 伪类变成真实的类，并避免使用不适用于 Internet Explorer 6 的属性选择器。
/* 校验失败的元素样式 */
input.invalid {
border-color: #900;
background-color: #fdd;
}
input:focus.invalid {
outline: none;
}JavaScript 代码有很大的变化，需要做更多的工作:
// 使用旧版浏览器选择 DOM 节点的方法较少
var form = document.getElementsByTagName("form")[0]; // 获取第一个 form 元素
var email = document.getElementById("mail"); // 获取 id 为 "mail" 的元素
// 以下是在 DOM 中访问下一个兄弟元素的技巧
// 这比较危险，很容易引起无限循环
// 在现代浏览器中，应该使用 element.nextElementSibling
var error = email;
while ((error = error.nextSibling).nodeType != 1); // 获取 email 元素后面的第一个元素节点
var emailRegExp =
/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/; // 定义电子邮件正则表达式
// 许多旧版浏览器不支持 addEventListener 方法
// 这只是其中一种简单的处理方法
function addEvent(element, event, callback) { // 定义 addEvent 函数，用于添加事件监听器
var previousEventCallBack = element["on" + event]; // 获取元素原有的事件监听器
element["on" + event] = function (e) { // 设置元素的新事件监听器
var output = callback(e); // 调用回调函数
if (output === false) return false; // 如果回调函数返回 false，则阻止默认事件和冒泡// 返回 `false` 来停止回调链，并中断事件的执行
if (typeof previousEventCallBack === "function") { // 如果原有的事件监听器是函数
output = previousEventCallBack(e); // 调用原有的事件监听器
if (output === false) return false; // 如果原有的事件监听器返回 false，则阻止默认事件和冒泡
}
};
}
// 现在我们可以重构字段的约束校验了
// 由于不使用 CSS 伪类，我们必须明确地设置 valid 或 invalid 类到 email 字段上
addEvent(window, "load", function () { // 页面加载完成后执行以下代码
var test = email.value.length === 0 || emailRegExp.test(email.value); // 检查 email 元素的值是否为空或符合正则表达式
email.className = test ? "valid" : "invalid"; // 根据检查结果设置 email 元素的类名
});
// 处理用户输入事件
addEvent(email, "input", function () { // 当 email 元素的值改变时执行以下代码
var test = email.value.length === 0 || emailRegExp.test(email.value); // 检查 email 元素的值是否为空或符合正则表达式
if (test) { // 如果检查结果为真
email.className = "valid"; // 设置 email 元素的类名为 "valid"
error.innerHTML = ""; // 清空错误信息显示区域的内容
error.className = "error"; // 设置错误信息显示区域的类名为 "error"
} else { // 否则
email.className = "invalid"; // 设置 email 元素的类名为 "invalid"
}
});
// 处理表单提交事件
addEvent(form, "submit", function () { // 当表单提交时执行以下代码
var test = email.value.length === 0 || emailRegExp.test(email.value); // 检查 email 元素的值是否为空或符合正则表达式
if (!test) { // 如果检查结果为假
email.className = "invalid"; // 设置 email 元素的类名为 "invalid"
error.innerHTML = "I expect an e-mail, darling!"; // 设置错误信息显示区域的内容
error.className = "error active"; // 设置错误信息显示区域的类名为 "error active"
return false; // 阻止表单提交
} else { // 否则
email.className = "valid"; // 设置 email 元素的类名为 "valid"
error.innerHTML = ""; // 清空错误信息显示区域的内容
error.className = "error"; // 设置错误信息显示区域的类名为 "error"
}
});
建立自己的校验系统并不难。困难的部分是使其足够通用，以跨平台和任何形式使用它可以创建。
有许多库可用于执行表单校验; 你应该毫不犹豫地使用它们。这里有一些例子：
独立的库（原生 Javascript 实现）：
Validate.js
jQuery 插件：
Validation
Valid8
远程校验
当用户输入的数据与存储在应用程序服务器端的附加数据绑定时，这种校验是必要的。
一个应用实例就是注册表单，在这里你需要一个用户名。为了避免重复，执行一个 AJAX 请求来检查用户名的可用性，要比让先用户发送数据，然后因为表单重复了返回错误信息要好得多。
执行这样的校验需要采取一些预防措施：
它要求公开 API 和一些数据；您需要确保它不是敏感数据。
网络滞后需要执行异步校验 这需要一些用户界面的工作，以确保如果校验没有适当的执行，用户不会被阻止。
10. 发送表单数据
当用户提交表单时发生了什么——数据去了哪，以及当它到达时该如何处理？我们还研究了与发送表单数据相关的一些安全问题。
10.1 数据都去哪儿了？
客户端/服务器体系结构
客户端(通常是 web 浏览器) 向服务器发送请求 (大多数情况下是Apache、Nginx、IIS、Tomcat等 web 服务器)，使用HTTP 协议。服务器使用相同的协议来回答请求。
在客户端，HTML 表单只不过是一种方便的用户友好的方式，可以配置 HTTP 请求将数据发送到服务器。这使用户能够提供在 HTTP 请求中传递的信息。
在客户端：定义如何发送数据