问题描述
我需要对以下组件进行表单验证。如果用户选择 Postpaid，planValue 应该大于 399，data 应该大于 50。如果用户选择 Prepaid，planValue 应该大于 200，data 应该大于 20，否则应该显示相应字段的 planMsg 和 dataMsg。我需要在更改中调用验证函数。当我开始输入 planValue 或数据时，msg 正在显示，但在我输入正确的值后，msg 并没有消失。是否有正确的方法来验证此表单。
import React from 'react';
import Axios from 'axios';
const url = "http://localhost:4000/planDetails";
class Addplan extends React.Component {
constructor() {
super();
this.state = {
planData: { planValue: '',data: '',calls: '',addOns: '',planType: '' },successMessage: '',errorMessage: '',planMsg: '',minVal: '',maxVal: '',dataMsg: '',minData: '',maxData: '',};
}
addplan = (e) => {
const plan = {
planValue: this.state.planData.planValue,data: this.state.planData.data,calls: this.state.planData.calls,addOns: this.state.planData.addOns,planType: this.state.planData.planType,}
Axios.post(url,plan)
.then(res => console.log(res))
.catch(error => {
console.log(error);
})
}
change = (event) => {
const value = event.target.value;
const name = event.target.name;
this.setState({
planData: {
[name]: value,}
})
if (name === 'planType') {
this.setPlanLimit(value);
}
this.validate(name,value);
}
setPlanLimit = (value) => {
if (value === "Postpaid") {
this.setState({
minVal: 399,minData: 50,})
}
if (value === "Prepaid") {
this.setState({
minVal: 200,minData: 20,})
}
}
validate = (name,value) => {
if (this.state.planData.planType === "Postpaid") {
if (name === 'planValue' && Number(value) < 399) {
this.setState({
planMsg: 'Value cannot be less than 399 for Postpaid'
})
} else if (name === 'planValue' && Number(value) > 399) {
this.setState({
planMsg: ''
})
}
}
if (this.state.planData.planType === "Prepaid") {
if (name === 'planValue' && Number(value) < 200) {
this.setState({
planMsg: 'Value cannot be less than 200 for Prepaid'
})
} else if (name === 'planValue' && Number(value) > 200) {
this.setState({
planMsg: ''
})
}
}
if (this.state.planData.planType === "Postpaid") {
if (name === 'data' && Number(value) < 50) {
this.setState({
dataMsg: 'Data should be 50GB or more for Postpaid'
})
} else if (name === 'data' && Number(value) > 50) {
this.setState({
dataMsg: ''
})
}
}
if (this.state.planData.planType === "Prepaid") {
if (name === 'data' && Number(value) < 20) {
this.setState({
dataMsg: 'Data should be 20GB or more for Prepaid'
})
} else if (name === 'data' && Number(value) > 20) {
this.setState({
dataMsg: ''
})
}
}
}
render() {
return <React.Fragment>
<div>
<div className="row">
<div className="col-md-6 offset-md-3">
<br />
<div className="card">
<div className="card-header" style={{ backgroundColor: 'rgba(0,33,651)',color: 'white' }}>
<h6>Create a new plan</h6>
</div>
<div className="card-body">
<form onSubmit={this.addplan} className="form" >
<div className="form-group">
<label>Type</label> <br />
<div className="form-check form-check-inline">
<input value="Postpaid" onChange={this.change} className="form-check-input" type="radio" name="planType" id="postpaid" required />
<label className="form-check-label" htmlFor="postpaid">Postpaid</label>
</div>
<div className="form-check form-check-inline">
<input value="Prepaid" onChange={this.change} className="form-check-input" type="radio" name="planType" id="prepaid" required />
<label className="form-check-label" htmlFor="postpaid">Prepaid</label>
</div>
</div>
<div className="form-group">
<label>Plan Value</label>
<input onChange={this.change} type="number" name="planValue" className="form-control" required min={this.state.minVal} max={this.state.maxVal} />
</div>
<p id="planMsg" className="text-danger">
{this.state.planMsg}
</p>
<div className="form-group">
<label>GB/Month</label>
<input onChange={this.change} type="number" name="data" className="form-control" required min={this.state.minData} max={this.state.maxData} />
</div>
<p id="dataMsg" className="text-danger">
{this.state.dataMsg}
</p>
<div className="form-group">
<label>Unlimited Calls</label> <br />
<div className="form-check form-check-inline" >
<input onChange={this.change} className="form-check-input" type="radio" name="calls" id="yes" required />
<label className="form-check-label" htmlFor="yes">Yes</label>
</div>
<div className="form-check form-check-inline" >
<input onChange={this.change} className="form-check-input" type="radio" name="calls" id="no" required />
<label className="form-check-label" htmlFor="no">No</label>
</div>
</div>
<div className="form-group">
<label> Add-ons</label>
<textarea onChange={this.change} value={this.state.planData.addOns} name="addOns" cols="83" className="form-control" required ></textarea>
</div>
<div className="form-group">
<button type="submit" className="btn btn-primary"
style={{ backgroundColor: 'rgba(0,65)',fontSize: '15px' }} >
Add Plan
</button>
</div>
</form>
</div>
{this.state.successMessage ? <p id="successMsg" className="text-success addMsg"> {this.state.successMessage} :</p> :
<p id="errorMessage" className="text-danger message">{this.state.errorMessage}</p>
}
</div>
</div>
</div>
</div>
</React.Fragment>
}
}
export default Addplan;
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）