【发布时间】：2020-12-15 13:46:50
【问题描述】：
我在我的项目中使用 ReactJs。我有我的表单，我需要在每个字段中实现验证。电子邮件应该匹配一些模式（例如“@”），名称应该是一个字符串，字段不能为空等。谢谢。上面是我的 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>
)
}
}
【问题讨论】：
标签： javascript reactjs forms api validation