0

我有一个 redux-form 的电话号码字段。我希望这个字段是可选的（如果用户没有提交值，则默认为 ''），但如果他们输入了一个值，它应该检查以确保它是一个有效的电话号码。

我遇到的问题是我的表单的提交按钮当前被禁用，并且与我的 Redux 表单是否有效有关。我不确定如果它具有默认的 '' 值，为什么它不会通过有效。一旦在电话号码字段中输入了某些内容，它似乎确实会更改为 true 。

如果提交了某些内容，我如何检查验证，否则传递“”并且我的表单仍然有效？谢谢！

验证

const validate = (values) => {
  const errors = {};

  if (!/^[0-9-.() ]*$/i.test(values.phoneNumber)) {
    errors.phoneNumber = 'Invalid phone number';
  }

  return errors;
};

表单域

<div className={classNames(['form-field', {
  'error': phoneNumber.touched && phoneNumber.error,}])}
>
  <label className="form-field-title">
    Phone Number 
      {
        phoneNumber.touched && 
        phoneNumber.error && 
        <span>{phoneNumber.error}</span>
      }
  </label>

    <input
      type="text"
      className="form-input-field"
      {...phoneNumber}
      value={phoneNumber.value || ''}
    />
</div>

提交按钮

<button
  type="submit"
  className="btn dark"
  disabled={!this.props.valid}
>
  <span className="submit-text">
    {this.state.submitText}
  </span>
  <i className="fa fa-check"/>
</button>
4

1 回答 1

1

phoneNumber在测试 RegEx 之前尝试并测试看看是否有任何东西。

if (values.phoneNumber && !/^[0-9-.() ]*$/i.test(values.phoneNumber)) {
    errors.phoneNumber = 'Invalid phone number';
  }

如果values.phoneNumber为空，那么您的错误对象将返回空，并且有效的道具应该为真。

于 2016-07-02T06:49:30.080 回答