在 Redux 表单中验证 URL答案

【问题标题】：Validate URL in Redux Form在 Redux 表单中验证 URL
【发布时间】：2018-01-16 11:20:49
【问题描述】：

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

但是，我不知道如何验证 redux-form 中的 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;
}

【问题讨论】：

标签： javascript forms reactjs redux redux-form

【解决方案1】：

由于 redux 表单允许您 customize 它的 Field 组件，您可以使用纯 HTML 创建一个输入字段来验证这样的 url：

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

【讨论】：

如果我知道 URL 验证的格式会更好。这样我可以在用户输入无效 URL 时显示错误消息。不过谢谢。这是一个巧妙的解决方法。

【解决方案2】：

您可以使用验证器包 (https://www.npmjs.com/package/validator)，它对电子邮件、url、ascii .... 进行了许多验证，因此您可以导入包并以表单形式使用它：

import validator from 'validator'

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

  if (!validator.isURL(values.hyperlink)) {
    errors.hyperlink = 'This field can not be link'
  } 

  return errors
}

【讨论】：

【解决方案3】：

你可以用这个改变你的验证功能：

  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!";
      }
      else if(!isUrlValid(values.hyperlink) ) {
             errors.hyperlink="Insert a valid URL";
      }
      return errors;
    }
    const isUrlValid = (userInput) => {
        var res = userInput.match(/(http(s)?:\/\/.)?(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/g);
        if(res == null)
            return (false );
        else
            return (true);
    };

【讨论】：

【解决方案4】：

我刚刚发布了我的软件包redux-form-validators 的新版本。它允许您编写更简单的代码，如下所示：

let validations = {
  name: required({ msg: 'Please let me know who I should thank!' }),
  email: [required(), email()],
  desc: length({ max: 50 }),
  hyperlink: url(),
}

【讨论】：