javascript - 如何验证引导表单?
问题描述
我已经使用引导程序(reactjs 中的表单组件)制作了一个表单,但是当我尝试单击提交按钮时,即使我没有输入任何输入,表单也会被提交。我应该如何验证我的表单,以便在填写所有输入字段时只提交表单。
表单组件:
class Form extends Component {
render(){
return(
<div>
<div id="center">
<form>
<div className="form-group">
<label htmlFor="firstname">First Name:</label>
<input type="firstname" className="form-control" id="firstname" onChange={this.setFirstName}/>
</div>
<div className="form-group">
<label htmlFor="lastname">Last Name:</label>
<input type="lastname" className="form-control" id="lastname" onChange={this.setLastName}/>
</div>
<div className="form-group">
<label htmlFor="email">Email address:</label>
<input type="email" className="form-control" id="email" onChange={this.setEmailId}/>
</div>
<div className="form-group">
<label htmlFor="bankacc">IBAN:</label>
<div id="deletebank" className="items">
<input type="bankacc" className="form-control" id="bankacc" onChange={this.setIban}/>
<button type="button" className="btn btn-default btn-sm">
<span className="glyphicon glyphicon-trash"></span>
</button>
</div>
</div>
<div className="form-group">
<label htmlFor="bankname">Bank Name:</label>
<input type="bankname" className="form-control" id="bankname" onChange={this.setBankName}/>
</div>
<div className="form-group">
<button type="button" className="btn btn-success" onClick={this.showUser}>Submit</button>
</div>
</form>
</div>
</div>
)}
}
截屏:
解决方案
You can make use of html5's require property for simple form validation
<input type="firstname"
className="form-control"
id="firstname"
required
onChange={this.setFirstName}/>
Also one suggestion is that, I see you are calling different methods for every
fields. You can simple use
onChange={this.handleChange}
handleChange = (e) => {
const { value, id } = e.target;
this.setState({ [id]: e.target.value })
}
your state can be
state = {
lastname: '',
email: ''
} etc....
Your submit button will be
<button type="submit" className="btn btn-success" onSubmit= .
{this.handleSubmit}>Submit</button>
If you want to customize it, you can follow the link.
https://stackoverflow.com/questions/41296668/reactjs-form-input-validation
推荐阅读
- c# - 动态用户控件事件未在 C# 中执行方法
- java - 如何使用 Spring Integration 和 MongoDB 实现消息队列?
- swift4.1 - while 循环中余数运算符 % 的意外结果 - Swift
- django - django heroku,导入错误:没有名为 photos.apps 的模块
- linux - ASCII 转义序列和控制字符是标准的一部分吗?
- wpf - 放置在 ItemsControl 中时,单击事件不会触发上下文菜单
- excel - 计算日期范围内成功联系的不同人员的数量 Excel
- php - 按共同值对多维数组进行排序和合并
- python - Python Boto3 列出窗口化数据框中的实例
- sql - 在计算一定数量的行后重置 ROW_NUMBER(或类似函数)