RMFV (React Material UI Form Validator)
React material ui form validator and form handler.
RMFV, doğrulama motoru olarak Validator.js ve HTTP istekleri için Axios kullanır.
Bu ÖZGÜR ÖZER Arkadaşımızın geliştirmiş olduğu form validator'dür. Gayet Başarılı ve düzgün çalışmakta aynı zamanda işlerimizi inanılmaz kolaylaştırmatadır. Bu konuda Özgür arkadaşımızı tebrik ediyorum. Bu paketi Material UI react js için uyarlamaya çalıştım. Eksikleri olabilir bu konuda desteklerizi bekliyorum.
Demo kullanım
Yükleme
YARN ile yükleme.
$ yarn add rmfv
NPM ile yükleme.
$ npm i rmfv
Kullanım
Yalnızca form doğrulayıcı seçeneği.
import React from 'react'import ReactDOM from 'react-dom' // Import packageimport Form TextFld TextMulti TextSelect TextSwitch TextCheck from './../src/Rmfv'import MenuItem Button from '@material-ui/core/' // Create validation rules (https://github.com/chriso/validator.js#validators)const validations = username: rule: 'isLength' args: min: 1 invalidFeedback: 'Boş Geçilemez' rule: 'isLength' args: min: 4 max: 32 invalidFeedback: 'Kullanıcı Adı minimum 4, maksimum 32 karakter olmalıdır' aciklama: rule: 'isLength' args: min: 1 invalidFeedback: 'Boş Gecilemez' gorevi: rule: 'isLength' args: min: 1 invalidFeedback: 'Boş Gecilemez' Switch: rule: 'equals' args: 'on' invalidFeedback: 'Lütfen Onayla' Check: rule: 'equals' args: 'on' invalidFeedback: 'Lütfen Onayla' const App = const switched setSwitched = const checked setChecked = const preSubmit = res console const onSubmit = res console const postSubmit = res console if resdatasuccess res const postOptions = method: 'post' url: 'https://rfv-demo-backend-kb3ppjk4g0ol.runkit.sh/test' return <Form = = = => <h2>Demo Form</h2> <div>Type "john" into username to see the backend error</div> <br /> <div> <TextFld ="username" ="outlined" ='username' ='Username' = /> </div> <br /> <div> <TextMulti ="aciklama" ="4" ="outlined" ='aciklama' ='Aciklama' = /> </div> <br /> <div> <TextSelect ="gorevi" ="Görevini Seçiniz" ="gorevi" ="outlined" = > <MenuItem ="1">Evet</MenuItem> <MenuItem ="2">Hayır</MenuItem> </TextSelect> </div> <br /> <div> <TextSwitch ="switch" ="primary" = = ="switch"> <label ="Switch"/> </TextSwitch> </div> <br /> <div> <TextCheck ="checked" ="primary" = = ="Checked"> <label ="Checked"/> </TextCheck> </div> <Button ="submit" ="contained" ="primary"> Gönder </Button> </Form> ReactDOM