我正在使用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;
}
最佳答案
由于 redux 表单允许您customize其 Field
组件,您可以使用纯 HTML 创建一个输入字段来验证网址,如下所示:
<input id="my_url" name="my_url" value type="url" placeholder="your website goes here" pattern="https?://.+" required >
关于javascript - 验证 Redux 表单中的 URL,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48280065/