validat یا اعتبار سنجی به ما این امکان را می‌دهد که درستی داده های  ورودی فرم ها را کنترل کنیم. تمامی فریم ورک‌ها روش اعتبارسنجی خود رادارند و در React هم مستثنی نیست ؛ ری اکت هم به عنوان یکی از فریم ورک های قدرتمند ، روش خاص خود را جهت validat فرم ها دارد. 

 React-validation چندین مؤلفه را فراهم می‌کند که از طریق روش ورودی که توسط مؤلفه Form به فرم متصل میشود. این فرایند اعتبارسنجی را با یک مثال به صورت دمو توضیح خواهم داد. 

نکته: توضیحات این دمو مربوط به پروژه شخصی میباشد و از مفاهیم آن برای پروژه خود استفاده کنید.

ابتدا با دستور زیر validation ری اکت را نصب میکنیم و در صفحه مورد نظر import میکنیم.

npm install react-validation

دستور import validation در ری اکت :

import validator from 'validator';

در این مثال چند ولیدیت تعریف میکنیم تا کارا آغاز کنیم ؛

import validator from 'validator';
const required = (value) => {
  if (!value.toString().trim().length) {
    // We can return string or jsx as the 'error' prop for the validated Component
    return 'require';
  }
};
 
const email = (value) => {
  if (!validator.isEmail(value)) {
    return `${value} is not a valid email.`
  }
};
 
const lt = (value, props) => {
  // get the maxLength from component's props
  if (!value.toString().trim().length > props.maxLength) {
    // Return jsx
    return <span className="error">The value exceeded {props.maxLength} symbols.</span>
  }
};
 
const password = (value, props, components) => {
  // NOTE: Tricky place. The 'value' argument is always current component's value.
  // So in case we're 'changing' let's say 'password' component - we'll compare it's value with 'confirm' value.
  // But if we're changing 'confirm' component - the condition will always be true
  // If we need to always compare own values - replace 'value' with components.password[0].value and make some magic with error rendering.
  if (value !== components['confirm'][0].value) { // components['password'][0].value !== components['confirm'][0].value
    // 'confirm' - name of input
    // components['confirm'] - array of same-name components because of checkboxes and radios
    return <span className="error">Passwords are not equal.</span>
  }
};

حالا میتونیم از کامپوننت نوشته شده در پروژه React استفاده کنیم؛ حالا به سراغ کامپوننتی میرویم که در آن ساختار فرم داریم .

import Form from 'react-validation/build/form';
import Input from 'react-validation/build/input';
import React, { Component } from 'react';
 
export default class Login extends Component {
    render() {
        return <Form>
            <h3>Login</h3>
            <div>
                <label>
                    Email*
                    <Input value='email@email.com' name='email' validations={[required, email]}/>
                </label>
            </div>
            <div>
                <label>
                    Password*
                    <Input type='password' name='password' validations={[required]}/>
                </label>
            </div>
            <div>
                <Button>Submit</Button>
            </div>
        </Form>;
    }
}