控件与数据校验

元信息

目标：掌握表单控件的输入约束——name 分组与传值、label/placeholder 提示、pattern/required 客户端校验，并理解客户端校验为什么不可靠、服务端校验为什么必须
关键概念：控件、name属性、label、placeholder、pattern、required、客户端校验、服务端校验
关联阶段：cp1
常见误区：控件漏写 name 属性（服务端脚本按 name 读取控件的值，漏了数据就传不到后端）；radio/checkbox 各写不同 name（相同 name 才标记为同一组，从而具有单选/多选特征）；以为有了客户端校验就够了（浏览器校验不可靠，敏感数据仍必须在服务端脚本再次校验）

什么是控件？

控件定义了用户的交互方式，包含多种类型

name 属性

控件必须要有name属性,因为服务端脚本将根据name属性来读取控件的值
对于单选或多选控件而言,相同的name标记着它们属于同一组,从而具有单选或多选的输入特征

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>

Open Sandbox

控件标签标记 `<label>`

<label>标记用于说明控件的含义,通常与控件结对出现,对于非视觉用户尤其有意义

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>

Open Sandbox

可以简单的认为:控件的name属性是一个后端属性,而id属性才是一个前端属性

控件提示属性 place holder

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>

Open Sandbox

Placeholder 是 HTML5 新增的一个表单标签属性，当 input 或者 textarea 设置了该属性后，该属性的值将作为灰字提示显示在文本框中，当文本框获得焦点（或输入内容）时，提示文字自动消失。

占位符可以补充<label>标记的作用,提供输入的示例,更好的提示用户.

客户端数据校验

HTML5 提供为 pattern,require等属性支持在浏览器端对输入的数据进行校验,譬如注册表单要求用户必须输入合法的email地址,则可以通过下例实现:

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>

Open Sandbox

也可以直接通过 HTML5 提供的新控件类型

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>

Open Sandbox

服务端数据检验

当表单数据发送给服务端的脚本后，服务端脚本使用服务端的语言工具如php等对各字段进行必填、格式等检查，称之为服务端校验

思考：

在现实的Web应用中，为什么必须要进行服务端校验？
既然必须进行服务检验，为什么还要进行客户端校验？

注意：基于浏览器的客户端校验是不可靠,对于敏感的数据,仍然需要在服务端脚本中再次进行校验

参考

https://emailregex.com/

控件与数据校验 ​

元信息 ​

什么是控件？ ​

name 属性 ​

控件标签标记 <label> ​

控件提示属性 place holder ​

客户端数据校验 ​

服务端数据检验 ​

参考 ​

控件与数据校验

元信息

什么是控件？

name 属性

控件标签标记 `<label>`

控件提示属性 place holder

客户端数据校验

服务端数据检验

参考