javascript - 验证 Redux 表单中的 URL

Question

我正在使用redux-form我的 React Redux 表单的包。我知道如何对其他字段进行验证，例如电子邮件、姓名。

但是，我不知道如何验证 redux 形式的 URL。我应该在 URL 字段中检查什么格式？

const renderField = ({ input, label, type, placeholder, message , meta: { touched, error, warning } }) => (
    <Form.Field >
      <label className="new-font">{label}</label>
      <Input {...input} type={type} className="new-font" placeholder={placeholder} />
      {touched && error &&
        <div>
          <Label
            basic
            color='red'
            pointing
            className="new-font"
          >
          {error}
          </Label>
        </div>
      }

      {(input.name === ('desc') || input.name === ('hyperlink')) ?
       <Message compact>
         {message}
       </Message> : <span></span>
      }
    </Form.Field>
  )

function validate(values){
  const errors ={};
  if(!values.name){
    errors.name='Please let me know who I should thank!';
  }
  if(!values.email){
    errors.email='Please enter an email address';
  }
  if (values.email && !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)
  ) {
    errors.email = 'Please enter a valid email address e.g test@gmail.com'
  }
  if(values.desc && values.desc.length > 50 ){
    errors.desc="Key in 50 characters or less";
  }
  if(!values.hyperlink){
    errors.hyperlink="Insert a URL address here to your favourite website!";
  }
  return errors;
}

Answer 1

由于 redux 表单允许您customize其 Field 组件，您可以使用纯 HTML 创建一个输入字段来验证网址，如下所示:

<input id="my_url" name="my_url" value type="url" placeholder="your website goes here" pattern="https?://.+" required >