forms - 提交前和数据输入时的表单验证

Question

我开始研究 React，想为多个输入创建表单，在那里我可以在输入时检查数据的有效性，并在提交表单之前再次检查。
提交条件:所有字段均为必填项且数据有效。

目前，如果用户在输入字段中输入无效数据，则会在同一字段附近显示错误文本。如果用户在空白字段的表单上单击“提交”按钮，也会显示错误文本。

但我真的无法解决，在我的示例中，我应该如何在提交表单之前进行验证::表单的输入字段是否有错误。

import React from 'react'
import { render } from 'react-dom'

const ErrorOutput = props => {
  let name = props.name
  let inputValue = props.case
  let submit = props.submit
  console.log(props.submit)
  if (name === 'firstName') {
    if (!inputValue.match(/^[a-zA-Z]+$/) && inputValue.length > 0) {
        return <span>Letters only</span>
      } else if (submit && inputValue.length === 0) {
        return <span>Required</span>
      }
    return <span></span>
  }
  if (name === 'telNo') {
    if(!inputValue.match(/^[0-9]+$/) && inputValue.length > 0) {
        return <span>Numbers only</span>
      } else if (submit && inputValue.length === 0) {
        return <span>Required</span>
      }
    return <span></span>
  }
}

class App extends React.Component {
  constructor(props){
    super(props)

    this.state = {
      firstName: '',
      telNo: '',
      submit: false
    }
  }

  handleSubmit(e){
    e.preventDefault()
    let submit = true
    this.setState ({submit: submit})
    // ... Validation
  }

  handleValidation(e) {    
    this.setState({
      [e.target.name]: e.target.value 
    })  
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit.bind(this)}>
        <div>
          <label>
            First name:
          </label>
          <input
            type='text'
            name ='firstName'
            value = {this.state.firstName}
            onChange = {this.handleValidation.bind(this)}
          />
          <ErrorOutput case={this.state.firstName} name={'firstName'} submit = {this.state.submit} />
        </div>
        <div>
          <label>
            Phone number:
          </label>
          <input
            type='tel'
            name ='telNo'
            value = {this.state.telNo}
            onChange = {this.handleValidation.bind(this)}
          />
          <ErrorOutput case={this.state.telNo} name={'telNo'} submit = {this.state.submit} />
        </div>
        <button>
          Submit
        </button> 
      </form>
    )
  }
}

render(
  <App />,
  document.getElementById('root')
)

Answer 1

以下代码是在提交之前通过表单和表单验证添加数据的示例。可以添加更多验证。

class Form extends React.Component {
constructor(props) {
super(props);
this.state = {
  name: '',
  age: '',
  email: '',
  errorName: '',
  errorAge: '',
  errroMail: '',
  dataValue: false
};
this.getName = this.getName.bind(this);
this.getAge = this.getAge.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.postDatainDisplay = this.postDatainDisplay.bind(this);
}

componentWillReceiveProps(nextProps) {
    if (this.props.name !== nextProps.name) {
        this.setState({ dataValue: true });
    }
}
postDatainDisplay(dataObj) {
    this.props.postData(dataObj);
}
getName(event) {
    const { name, age } = this.state;
    this.setState({ errorName: '' });
    this.setState({ name: event });
}
getAge(event) {
   const { age } = this.state;
   this.setState({ errorAge: '' });
   this.setState({ age: event });
}
handleSubmit() {
const { name, age } = this.state;
//add more validation here 
if (name === '') {

  this.setState({ errorName: 'name cannot be blank', dataValue: false 
});

} else if (age === '') {

  this.setState({ errorAge: 'Age cannot be blank', dataValue: false });
} else
{     this.setState({ data: { name, age } }, () => {
      this.props.sendData(this.state.data);
}
render() {
const { name, age } = this.props;
return (
  <div className="container">
    <form>
      name:<input
        type="text"
        onChange={event => {
          this.getName(event.target.value);
        }}
      />
      {this.state.errorName}
      <br />
      <br />
      age:{' '}
      <input
        type="text"
        onChange={event => {
          this.getAge(event.target.value);
        }}
      />
      {this.state.errorAge}
      <br />
      <br />
       <input type="button" onClick={this.handleSubmit} value="Submit" 
       />
    </form>
    </div>