时间戳

首页 > 解决方案 > React 表单中的 onSubmit 验证问题

javascript - React 表单中的 onSubmit 验证问题

问题描述

我有一个简单的设置来验证一些表单条目。它只推送第一个条目的验证。所以在状态我有：

this.state = {
  username: '',
  email: '',
  zip: '',
  errors:[]
}

submit按钮：

<div>
  <button onClick={this.handleSubmit}
     >submit
  </button>
</div>

提交按钮和表单都触发handleSubmit：

handleSubmit(e) {
    e.preventDefault();
    this.setState({errors:[]});
    const {username, email, zip} = this.state;
    const errors = validate(username, email, zip);
    if (errors.length>0) {
      this.setState({errors});
    }
}

命中validate：

function validate(username, email, zip) {
  let validEmail = RegExp(/[^@ \t\r\n]+@[^@ \t\r\n]+\.[^@ \t\r\n]+/);
  let validZip = RegExp(/^\d{5}$/);
  const errors = [];
  if (username.length < 3 || null) {
    errors.push('Name must be at least 3 characters long.');
  }
  if (validEmail.test(email)) {
    errors.push('Email address must be valid email address.');
  }
  if (validZip.test(zip)) {
      errors.push('Zip code must be 5 digits.')
  }
  console.log(errors);
  return errors;
}

然后，从更新的状态，错误应该打印为行项目：

<ul className="errorList">
   {this.state.errors.map(
        (error => 
            <li key={error}>
                {error}
            </li>
        )
    )}
</ul>

但只有第一个验证username在控制台日志和无序列表中有效（for ）。

求指教^~^

标签： javascriptreactjsformsvalidation

解决方案

validEmail.test(email)return ，如果邮件失败false，try!validEmail.test(email)会返回true

推荐阅读