如何使用 Formik 实现字段验证？

Question

我在我的项目中使用 ReactJs。 我有我的表单，我需要在每个字段中实现验证。 email 应该匹配一些模式（例如“@”），名称应该是一个字符串，字段不能为空等。谢谢。 上面是我的 Json 文件、我的表单、我的渲染和我的行。

我使用 json 作为我的后端：

{
  "member": [
    {
      "id": 1
      "avatar": "https://randomuser.me/api/portraits/men/58.jpg",
      "name": "Harry Potter",
      "email": "harrypotter@harry.com",
      "project": "Kill Voldemort",
      "devices": "Wand",
      "mainstack": "React",
      },   
    

我的表格：

renderForm() {
        return (
            <div className="form">
                <div className="row">
                <div className="col-12 col-md-4">
                        <div className="form-groud">
                            <label>Profile Picture</label>
                            <input type="text" className="form-control"
                                name="avatar"
                                value={this.state.member.avatar}
                                onChange={e => this.updateField(e)}
                                
                                placeholder="profile picture" />
                        </div>
                    </div>


                    <div className="col-12 col-md-4">
                        <div className="form-groud">
                            <label>Name</label>
                            <input type="text" className="form-control"
                                name="name"
                                value={this.state.member.name}
                                onChange={e => this.updateField(e)}
                                placeholder="name" />
                        </div>
                    </div>

                    <div className="col-12 col-md-4">
                        <div className="form-groud">
                            <label>Email</label>
                            <input 
                                type="text" 
                                className="form-control"
                                name="email"
                                value={this.state.member.email}
                                onChange={e => this.updateField(e)}
                                onblur={e => this.validateField(e)}
                                placeholder="email" />
                        </div>
                    </div>

                    <div className="col-12 col-md-4">
                        <div className="form-groud">
                            <label>Project</label>
                            <input type="text" className="form-control"
                                name="project"
                                value={this.state.member.project}
                                onChange={e => this.updateField(e)}
                                placeholder="project" />
                        </div>
                    </div>

                    <div className="col-12 col-md-4">
                        <div className="form-groud">
                            <label>Devices</label>
                            <input type="text" className="form-control"
                                name="devices"
                                value={this.state.member.devices}
                                onChange={e => this.updateField(e)}
                                placeholder="devices" />
                        </div>
                    </div>

                    <div className="col-12 col-md-4">
                        <div className="form-groud">
                            <label>Main Stack</label>
                            <input type="text" className="form-control"
                                name="mainstack"
                                value={this.state.member.mainstack}
                                onChange={e => this.updateField(e)}
                                placeholder="mainstack" />
                        </div>
                    </div>
                </div>

                <hr />
                <div className="row">
                    <div className="col-12 d-flex justify-content-end">
                        <button className="btn btn-primary"
                            onClick={e => this.save(e)}>
                            Save
                        </button>

                        <button className="btn btn-secondary ml-2"
                            onClick={e => this.clear(e)}>
                            Cancel
                        </button>
                    </div>
                </div>

            </div>
        )
    }

我的桌子：

renderTable() {
        return (
            <table className="table">
                <thead>
                    <tr>
                        <th>Profile Pictute</th>
                        <th>Name</th>
                        <th>Email</th>
                        <th>Project</th>
                        <th>Devices</th>
                        <th>Main Stack</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {this.renderRows()}
                </tbody>
            </table>

        )    
    }   

我的行：

renderRows(){
    return this.state.list.map(member => {
        return (
            <tr key={member.id}>
                <td><div className="avatar">
                <img src={member.avatar} alt={member.name} /> 
                    </div>
                </td>
                <td>{member.name}</td>
                <td>{member.email}</td>
                <td>{member.project}</td>
                <td>{member.devices}</td>
                <td>{member.mainstack}</td>
                <td>
                    <button className="btn btn-warning"
                        onClick={() => this.load(member)}>
                        <i className="fa fa-pencil"></i>
                    </button>
                    <button className="btn btn-danger ml-2"
                        onClick={()=>{this.confirmRemove(member)}}>
                        <i className="fa fa-trash"></i>
                    </button>
                </td>    
            </tr>
        )
    })
}
    render () {
        return (        
            <Main>
                {this.renderForm()}
                {this.renderTable()}
                <Helmet>
                <title>Add Member</title>
                </Helmet>   
            </Main>                  
                
        )
    }
}

Answer 1

我不认为 React 有任何内置的表单验证，不像 Angular。

现在，一线希望是，您可以根据用例以不同的方式进行验证，例如，您可以定义具有验证功能的自定义输入组件，或者您可以使用一些现有的库来完成一些繁重的工作你。

话虽如此，我相信你会对后面感兴趣，使用库，你可以看看Formik和这篇文章Validating a form in React

Answer 2

如果您只想验证它是否是 email 或不只是使用 html email 字段而不是文本字段。 对于更多验证，最好添加 JavaScript 函数，这些函数将在客户端本身进行验证，然后再进行进一步验证。