پاسخ داده شد
Form Validation در recat با استفاده از formik چکونه انجام می شود؟
- فرشته حقیقی 4 سال قبل سوال کرد
- شما باید برای ارسال دیدگاه وارد شوید
پاسخ عالی
formik گروهی از کامپوننتها و hook ها برای ساخت فرم در react و انجام validation و error messages و form submission در فرم می باشد. validation بوسیله آبجکت Yup و validationSchema انجام می شود.
فرض کنیم که یک فرم داریم که شامل نام کاربری و پسورد می باشد که باید توسط کاربر وارد شود.
import React from 'react';
import { Formik, Field, Form, ErrorMessage } from 'formik';
import * as Yup from 'yup';
class App extends React.Component {
render() {
return (
<Formik
initialValues={{
firstName: '',
password: '',
confirmPassword: '',
acceptTerms: false
}}
validationSchema={Yup.object().shape({
firstName: Yup.string()
.required('First Name is required'),
password: Yup.string()
.min(6, 'Password must be at least 6 characters')
.required('Password is required'),
confirmPassword: Yup.string()
.oneOf([Yup.ref('password'), null], 'Passwords must match')
.required('Confirm Password is required'),
acceptTerms: Yup.bool()
.oneOf([true], 'Accept Ts & Cs is required')
})}
onSubmit={fields => {
alert('SUCCESS!! :-)\n\n' + JSON.stringify(fields, null, 4))
}}
>
{({ errors, status, touched }) => (
<Form>
<div className="form-row">
<div className="form-group col-5">
<label htmlFor="lastName">Last Name</label>
<Field name="lastName" type="text" className={'form-control' + (errors.lastName && touched.lastName ? ' is-invalid' : '')} />
<ErrorMessage name="lastName" component="div" className="invalid-feedback" />
</div>
</div>
<div className="form-row">
<div className="form-group col">
<label htmlFor="password">Password</label>
<Field name="password" type="password" className={'form-control' + (errors.password && touched.password ? ' is-invalid' : '')} />
<ErrorMessage name="password" component="div" className="invalid-feedback" />
</div>
<div className="form-group col">
<label htmlFor="confirmPassword">Confirm Password</label>
<Field name="confirmPassword" type="password" className={'form-control' + (errors.confirmPassword && touched.confirmPassword ? ' is-invalid' : '')} />
<ErrorMessage name="confirmPassword" component="div" className="invalid-feedback" />
</div>
</div>
<div className="form-group">
<button type="submit" className="btn btn-primary mr-2">Register</button>
<button type="reset" className="btn btn-secondary">Reset</button>
</div>
</Form>
)}
</Formik>
)
}
}
export { App };المانهای <Field /> و <ErrorMessage /> در کتابخانه Formik می باشند که به طور اتوماتیک input ها و error messages را bind می کند.
فایل html فرم بصورت زیر پیاده سازی می شود:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React + Formik Example</title>
<!-- bootstrap css -->
<link href="//netdna.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="card m-3">
<h5 class="card-header">React + Formik Validation Example</h5>
<div class="card-body">
<div id="app"></div>
</div>
</div>
</body>
</html>و فایل jsx بصورت زیر انجام می شود. (jsx المان های react را تولید می کند و یک اکستنشن از جاوااسکریپت می باشد).
import React from 'react';
import { render } from 'react-dom';
import { App } from './App';
render(
<App />,
document.getElementById('app')
);- فرشته حقیقی 4 سال قبل پاسخ داد
- آخرین ویرایش 4 سال قبل
- شما باید برای ارسال دیدگاه وارد شوید
پاسخ شما
