10-表单验证与清理

选择背景色：黄橙洋红淡粉水蓝草绿白色选择字体：宋体黑体微软雅黑楷体选择字体大小：小中大特恢复默认

5.2.5　表单验证与清理

使用表单记录和存储用户输入的一个重要部分是让用户知道他们什么时候违反了开发者设置的验证规则，以及他们什么时候提供的数据不能满足当前应用。我们希望，从客户端接收数据的服务器应用有严格的数据验证与清理程序——不能依赖浏览器应用来完成这个领域的所有工作。而且即便服务器上有良好的数据验证和清理程序，仍然需要在前端提供并执行良好的数据实践以帮助用户、增加另一级对危险分子的防范以及提高数据完整性。如果不这样做，可能会让用户感到困惑，存在安全漏洞以及无意义的数据，这些都是不想遇到的问题。

正如目前所看到的，使用表单更新组件状态涉及了state、props和组件方法，就像React中的其他东西一样。要向组件添加验证和清理功能，开发者需要挂载到更新过程中去。为此，开发者需要编写通用的验证和清理功能，这些功能可以在能够使用JavaScript的任何地方使用并且可能在大部分其他前端框架中也可以使用。

练习5-1　思考React事件和表单

花一分钟时间想一想，到目前为止你对React中的事件和表单了解了多少。React中的事件与浏览器中处理的事件有不同之处吗？如果有，它们有什么不同？

幸运的是，正在创建的CreatePost组件不需要进行大量的验证，只需要检查最大长度并进行一些额外验证以便组件不会向API服务器提交空帖子即可。为了学习和本地开发，我们搭建了一个简单的服务器，它接收大多数净荷而不做太多验证。编写服务器应用是本书范围之外的另一个领域，因此我们将只关注浏览器上的验证和清理。

设置应用的表单和输入的验证时，开发人员需要问自己几个问题。

应用对数据的要求是什么？
基于这些约束，如何帮用户提供有意义的数据？
是否有办法消除用户提供数据的不一致性？

首先，应该明确业务和应用后端（如果有的话）对数据的要求是什么。之所以应该从这里着手，是因为这将帮助开发者建立处理数据的基本的指导方针。由于我们已经确立服务器会接受大多数东西并且为帖子设定了基本数据类型，因此我们可以继续下一个问题。

根据当前约束，开发者如何才能最好地帮用户提供有意义的数据并拥有良好的应用体验？这通常牵涉到检查数据的大小、字符类型、上传文件的文件类型等。现在，CreatePost组件相当不错，除了长度没有什么需要验证的。接下来将检查最小和最大长度并且只有验证通过才让用户提交他们的帖子。代码清单5-7展示了如何为组件设置这些基本验证。

代码清单5-7　添加基本验证（src/components/post/Create.js）

//...
class CreatePost extends Component {
  constructor(props) {
    super(props);
    this.state = {
      content: '',
      valid: false,  ⇽--- 在当前组件的state中创建一个简单的valid属性
    };
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handlePostChange = this.handlePostChange.bind(this);
  }
  handlePostChange(event) {
    const content = event.target.value;
    this.setState(() => {
            return {
                content,
                valid: content.length <= 280  ⇽--- 通过设置最大长度来确定帖子的有效性（这里的280只是为了演示，用户有时希望帖子可以更长一些）
            };
    });
  }
  handleSubmit() {
    if (!this.state.valid) {
       return;
    }
    const newPost = {  ⇽--- 创建新帖子对象
        content: this.state.content,
    };
    console.log(this.state);
  }
  render() {
    return (
      <div className="create-post">
                <button onClick={this.handleSubmit}>Post</button>
                <textarea
                    value={this.state.content}
                    onChange={this.handlePostChange}
                    placeholder="What's on your mind?"
                />
      </div>
    );
  }
}

我们已经回答了前两个问题（数据约束和验证）。现在我们可以着手处理最后一个方面：通过（非常）基本的数据清理来消除数据的不一致。验证是要求用户提供特定的数据，而清理则是确保获取的数据是安全和格式正确的，并且以可持久化的方式存在。信息安全是一个巨大而又非常重要的领域，本书无法真正探究安全方面的数据处理，但我们可以为Letters处理一个较小的领域：冒犯性的内容。

我们将使用名为bad-words的JavaScript模块帮助解决这个问题，该模块可以从npm获取（主要的JavaScript模块注册和服务方）。它应该已经安装到项目中了。bad-words接收一个字符串并用星号替换黑名单上的所有单词（如果愿意，开发者可以创建自己的黑名单并替换默认的黑名单）。代码清单5-8中的示例是人为设计的，但你至少可以防止人们在公共应用中发布潜在冒犯性的内容。记住，这是一个精心设计的例子，其没有暗示或支持任何形式的审查。

代码清单5-8　添加基本的内容清理（src/components/post/Create.js）

import PropTypes from 'prop-types';
import React from 'react';
import Filter from 'bad-words';  ⇽--- 从bad-words模块导入默认对象
const filter = new Filter();  ⇽--- 使用构造函数创建过滤器实例
class CreatePost extends Component {
  //...
  handlePostChange(event) {
    const content = filter.clean(event.target.value);  ⇽--- 将表单值传递给filter的.clean()方法并用返回值设置state
     this.setState(() => {
            return {
                content,
                valid: content.length <= 280
            };
     });
  }
//...
   }
export default CreatePost;

Previous 上一篇本节目录 Next 下一篇

10-表单验证与清理

5.2.5 表单验证与清理

5.2.5　表单验证与清理