Question

我有一个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>

Answer 1

在测试RegEx之前，尝试并测试以查看phoneNumber是否有任何内容。

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

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

如何验证可选字段？

1 个答案: