如何验证React Bootstrap表单？解决空输入可提交问题

嘿，我来帮你搞定这个表单空提交的问题～你现在的表单没有做任何输入校验，所以不管字段填没填，点击提交按钮都会触发showUser方法。咱们可以通过状态管理+提交前校验来解决，还能加上可视化的错误提示，具体步骤如下：

1. 为组件添加状态管理 #

首先在类组件的构造函数里初始化状态，用来存储各个输入字段的值和错误提示信息，同时把方法绑定到组件实例上：

constructor(props) {
  super(props);
  this.state = {
    firstName: '',
    lastName: '',
    email: '',
    iban: '',
    bankName: '',
    errors: {} // 存储每个字段的错误提示
  };
  // 绑定方法到组件实例，避免this指向问题
  this.setFirstName = this.setFirstName.bind(this);
  this.setLastName = this.setLastName.bind(this);
  this.setEmailId = this.setEmailId.bind(this);
  this.setIban = this.setIban.bind(this);
  this.setBankName = this.setBankName.bind(this);
  this.showUser = this.showUser.bind(this);
}

2. 更新输入字段的 onChange 方法 #

修改每个字段的onChange方法，把用户输入的值同步到组件状态中：

setFirstName(e) {
  this.setState({ firstName: e.target.value });
}

setLastName(e) {
  this.setState({ lastName: e.target.value });
}

setEmailId(e) {
  this.setState({ email: e.target.value });
}

setIban(e) {
  this.setState({ iban: e.target.value });
}

setBankName(e) {
  this.setState({ bankName: e.target.value });
}

3. 实现表单验证逻辑 #

在showUser方法里先做字段非空校验，甚至可以加简单的格式校验（比如邮箱），如果有字段为空或者格式错误，就设置错误信息并阻止提交；只有所有字段都符合要求时，才执行提交逻辑：

showUser() {
  const { firstName, lastName, email, iban, bankName } = this.state;
  const errors = {};
  let isFormValid = true;

  // 逐个校验字段
  if (!firstName.trim()) {
    errors.firstName = 'First Name is required';
    isFormValid = false;
  }

  if (!lastName.trim()) {
    errors.lastName = 'Last Name is required';
    isFormValid = false;
  }

  if (!email.trim()) {
    errors.email = 'Email is required';
    isFormValid = false;
  } else if (!/\S+@\S+\.\S+/.test(email)) { // 简单的邮箱格式校验
    errors.email = 'Please enter a valid email';
    isFormValid = false;
  }

  if (!iban.trim()) {
    errors.iban = 'IBAN is required';
    isFormValid = false;
  }

  if (!bankName.trim()) {
    errors.bankName = 'Bank Name is required';
    isFormValid = false;
  }

  this.setState({ errors });

  // 验证通过后执行提交逻辑
  if (isFormValid) {
    // 这里写你的业务逻辑，比如发送请求、打印用户信息等
    console.log('Form submitted successfully!', this.state);
    // 可选：提交后重置表单
    this.setState({
      firstName: '',
      lastName: '',
      email: '',
      iban: '',
      bankName: '',
      errors: {}
    });
  }
}

4. 在表单中添加错误提示 #

修改表单的JSX，在每个输入字段下方显示错误提示，同时用Bootstrap的is-invalid和text-danger类给用户视觉反馈：

class Form extends Component {
  // 上面的构造函数和方法写在这里

  render(){ 
    const { errors } = this.state;
    return( 
      <div> 
        <div id="center"> 
          <form> 
            <div className="form-group"> 
              <label htmlFor="firstname">First Name:</label> 
              <input 
                type="text" {/* 注意：原来的type="firstname"不合法，改成text */}
                className={`form-control ${errors.firstName ? 'is-invalid' : ''}`} 
                id="firstname" 
                value={this.state.firstName}
                onChange={this.setFirstName}
              />
              {errors.firstName && <div className="text-danger">{errors.firstName}</div>}
            </div> 

            <div className="form-group"> 
              <label htmlFor="lastname">Last Name:</label> 
              <input 
                type="text" {/* 改成合法的text类型 */}
                className={`form-control ${errors.lastName ? 'is-invalid' : ''}`} 
                id="lastname" 
                value={this.state.lastName}
                onChange={this.setLastName}
              />
              {errors.lastName && <div className="text-danger">{errors.lastName}</div>}
            </div> 

            <div className="form-group"> 
              <label htmlFor="email">Email address:</label> 
              <input 
                type="email" 
                className={`form-control ${errors.email ? 'is-invalid' : ''}`} 
                id="email" 
                value={this.state.email}
                onChange={this.setEmailId}
              />
              {errors.email && <div className="text-danger">{errors.email}</div>}
            </div> 

            <div className="form-group"> 
              <label htmlFor="bankacc">IBAN:</label> 
              <div id="deletebank" className="items"> 
                <input 
                  type="text" {/* 改成合法的text类型 */}
                  className={`form-control ${errors.iban ? 'is-invalid' : ''}`} 
                  id="bankacc" 
                  value={this.state.iban}
                  onChange={this.setIban}
                />
                {errors.iban && <div className="text-danger">{errors.iban}</div>}
                <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="text" {/* 改成合法的text类型 */}
                className={`form-control ${errors.bankName ? 'is-invalid' : ''}`} 
                id="bankname" 
                value={this.state.bankName}
                onChange={this.setBankName}
              />
              {errors.bankName && <div className="text-danger">{errors.bankName}</div>}
            </div> 

            <div className="form-group"> 
              <button type="button" className="btn btn-success" onClick={this.showUser}>Submit</button> 
            </div> 
          </form> 
        </div> 
      </div> 
    )
  } 
}

这里还要提醒你一个小细节：你原来的输入框type设置成了firstname、lastname这些，这些不是合法的HTML输入类型，浏览器会默认当作text类型，但规范上应该改成正确的text哦～

内容的提问来源于stack exchange，提问作者stone rock