Charts and Console(5)Validation Form

最新推荐文章于 2020-07-21 17:25:42 发布

原创最新推荐文章于 2020-07-21 17:25:42 发布 · 77 阅读

0 ·

CC 4.0 BY-SA版权

UI 专栏收录该内容

122 篇文章

订阅专栏

本文介绍如何在React应用中实现简单的表单验证，包括必填项、长度限制、数值及电子邮件格式验证等。通过实例展示了如何将验证规则应用于具体字段。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Charts and Console(5)Validation Form

Follow the document, it is pretty straightforward.

ValidateForm.js some other validations can be added here as well.
export const required = value => value ? undefined : 'Required';

export const maxLength = max => value =>
value && value.length > max ? `Must be ${max} characters or less` : undefined;

export const minLength = min => value =>
value && value.length < min ? `Must be ${min} charactors or more` : undefined;

export const number = value => value && isNaN(Number(value)) ? 'Must be a number' : undefined;

export const minValue = min => value =>
value && value < min ? `Must be at least ${min}` : undefined;

export const maxValue = max => value =>
value && max < value ? `Must be less than ${max}` : undefined;

export const email = value =>
value && !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value) ?
'Invalid email address' : undefined;

Import the validations to the form
import {required, minLength, minValue} from '../common/ValidationForm';

Add that to the Field
<Field
type="text"
name="company"
label="Company"
placeholder="Company Name for Search(eg. walmart)"
validate={[ required, minLength(3) ]}
component={FieldInput}
/>

<Field
type="text"
name="interval"
label="Interval"
placeholder="Interval for Search unit minutes (eg. 70)"
validate={[ required, minValue(70) ]}
component={FieldInput}
/>

References:
https://learnetto.com/blog/how-to-do-simple-form-validation-in-reactjs
https://redux-form.com/6.6.1/examples/fieldlevelvalidation/