نکته: توضیحات این دمو مربوط به پروژه شخصی میباشد و از مفاهیم آن برای پروژه خود استفاده کنید.
ابتدا با دستور زیر 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>;
}
}