اعتبار سنجی در ری اکت - React

ساده ترین روش اعتبار سنجی فرم در فریمورک ری اکت - React

زمان مطالعه

5 دقیقه

تعداد بازدید

156

تعداد پرسش ها

0

افزودن به لیست علاقه مندی ها


برچسب ها :


اشتراک گذاری این مطلب
در مورد نویسنده : "من همیشه می توانم آزادانه انتخاب کنم، اما باید بدانم که اگر انتخاب نکنم، باز هم انتخابی کرده ام."

اعتبار سنجی در ری اکت - React

ساده ترین روش اعتبار سنجی فرم در فریمورک ری اکت - React

زمان مطالعه

5 دقیقه

تعداد بازدید

156

تعداد پرسش ها

0

افزودن به لیست علاقه مندی ها


برچسب ها :


اشتراک گذاری این مطلب

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>;
    }
}

 

در مورد نویسنده : "من همیشه می توانم آزادانه انتخاب کنم، اما باید بدانم که اگر انتخاب نکنم، باز هم انتخابی کرده ام."


پرسش و پاسخ
0
دوره پیشنهادی
دوره پیشنهادی