😸 📲 🧕🏽 प्रतिक्रिया के जटिल रूपों का सत्यापन। भाग 1 🤖 🐱 👴🏿

सबसे पहले आपको प्रतिक्रिया-सत्यापन-बू घटक को स्थापित करने की आवश्यकता है, मुझे लगता है कि आप प्रतिक्रिया से परिचित हैं और इसे कॉन्फ़िगर करना जानते हैं।

npm प्रतिक्रिया-सत्यापन-बू स्थापित करें

बहुत सी बातें न करने के लिए, मैं तुरंत एक छोटा कोड उदाहरण दूंगा।

import React, {Component} from 'react'; import {connect, Form, Input, logger} from 'react-validation-boo'; class MyForm extends Component { sendForm = (event) => { event.preventDefault(); if(this.props.vBoo.isValid()) { console.log('       ', this.props.vBoo.getValues()); } else { console.log('   ', this.props.vBoo.getErrors()); } }; getError = (name) => { return this.props.vBoo.hasError(name) ? <div className="error">{this.props.vBoo.getError(name)}</div> : ''; }; render() { return <Form connect={this.props.vBoo.connect}> <div> <Input type="text" name="name" /> {this.getError('name')} </div> <button onClick={this.sendForm}> {this.props.vBoo.isValid() ? ' ': ' !!!'} </button> </Form> } } export default connect({ rules: () => ( [ ['name', 'required'], ] ), middleware: logger })(MyForm);

इस कोड को पार्स करते हैं।

चलो कनेक्ट फ़ंक्शन के साथ शुरू करते हैं , हम अपने सत्यापन नियमों और अन्य अतिरिक्त मापदंडों को पास करते हैं। इस पद्धति को कॉल करके, हमें एक नया फ़ंक्शन मिलता है जिसमें हम अपने घटक ( MyForm ) को पास करते हैं ताकि यह प्रॉपर फॉर्म फॉर्मेशन के साथ काम करने के लिए आवश्यक तरीके प्राप्त करे ।

हमारे घटक के रेंडर फ़ंक्शन में, हम फॉर्म घटक को लौटाते हैं जिसे हम सत्यापन नियमों से जोड़ते हैं = {this.props.connect} । नेस्टेड घटकों को कैसे मान्य किया जाए, यह जानने के लिए फॉर्म के लिए यह एक आवश्यक डिजाइन है।
<इनपुट प्रकार = "टेक्स्ट" नाम = "नाम" /> इनपुट फ़ील्ड जिसे हम जांचेंगे, हमने नियम संपत्ति में कनेक्ट करने के लिए सत्यापन नियम पारित किए । हमारे मामले में, यह नाम खाली ( आवश्यक ) नहीं होना चाहिए।

हमने कंसोल में सत्यापन कैसे काम करता है, यह देखने के लिए कनेक्ट करने के लिए हम भी मिडिलवेयर: लकड़हारा पास किया।

हमारे घटक के प्रॉप्स में , हमें कार्यों का एक सेट मिला:

vBoo.isValid () - सही है यदि सभी इनपुट घटकों को मान्य किया गया है
vBoo.hasError (नाम) - सही है अगर नाम संपत्ति के साथ घटक मान्य नहीं है
vBoo.getError (नाम) - नाम संपत्ति के साथ एक घटक के लिए, त्रुटि पाठ देता है

अब हम इसे धीरे-धीरे जटिल कर देंगे, पहले हम भाषा को जोड़ने के लिए पास कर देंगे, ताकि हम भाषा के आधार पर सत्यापन नियमों को बदल सकें, और अतिरिक्त फ़ील्ड और सत्यापन नियम भी जोड़ सकें।

 import React, {Component} from 'react'; import {connect, Form, Input, InputCheckbox} from 'react-validation-boo'; class MyForm extends Component { sendForm = (event) => { event.preventDefault(); if(this.props.vBoo.isValid()) { console.log('       ', this.props.vBoo.getValues()); } else { console.log('   ', this.props.vBoo.getErrors()); } }; getError = (name) => { return this.props.vBoo.hasError(name) ? <div className="error">{this.props.vBoo.getError(name)}</div> : ''; }; render() { return <Form connect={this.props.vBoo.connect}> <div> <label>{this.props.vBoo.getLabel('name')}:</label> <Input type="text" name="name" /> {this.getError('name')} </div> <div> <label>{this.props.vBoo.getLabel('email')}:</label> <Input type="text" name="email" value="default@mail.ru" /> {this.getError('email')} </div> <div> <label>{this.props.vBoo.getLabel('remember')}:</label> <InputCheckbox name="remember" value="yes" /> {this.getError('remember')} </div> <button onClick={this.sendForm}> {this.props.vBoo.isValid() ? ' ': ' !!!'} </button> </Form> } } export default connect({ rules: (lang) => { let rules = [ [ ['name', 'email'], 'required', { error: '%name%    ' } ], ['email', 'email'] ]; rules.push(['remember', lang === 'ru' ? 'required': 'valid']); return rules; }, labels: (lang) => ({ name: '', email: ' ', remember: '' }), lang: 'ru' })(MyForm);

इस उदाहरण में, चेकबॉक्स याद रखें कि रूसी को आवश्यक रूप से स्थापित किया जाना चाहिए, लेकिन दूसरों में यह हमेशा मान्य होता है।

हमने कनेक्ट करने के लिए फ़ंक्शन लेबल (लैंग) भी पास किया, जो पठनीय रूप में फ़ील्ड का नाम देता है।

आपके घटक के प्रॉप्स में , एक गेटलैब (नाम) फ़ंक्शन होता है जो लेबल फ़ंक्शन को दिए गए मान को लौटाता है, या यदि ऐसा कोई मूल्य नहीं है, तो यह नाम लौटाता है।

VBoo कोर घटक

फॉर्म , इनपुट , इनपुटरेडियो , इनपुटचेकबॉक्स , सेलेक्ट , टेक्सारिया ।

 import React, {Component} from 'react'; import {connect, Form, Input, Select, InputRadio, InputCheckbox, Textarea} from 'react-validation-boo'; class MyForm extends Component { sendForm = (event) => { event.preventDefault(); if(this.props.vBoo.isValid()) { console.log('       ', this.props.vBoo.getValues()); } else { console.log('   ', this.props.vBoo.getErrors()); } }; getError = (name) => { return this.props.vBoo.hasError(name) ? <div className="error">{this.props.vBoo.getError(name)}</div> : ''; }; render() { return <Form connect={this.props.vBoo.connect}> <div> <label>{this.props.vBoo.getLabel('name')}:</label> <Input type="text" name="name" /> {this.getError('name')} </div> <div> <label>{this.props.vBoo.getLabel('email')}:</label> <Input type="text" name="email" value="default@mail.ru" /> {this.getError('email')} </div> <div> <label>{this.props.vBoo.getLabel('gender')}:</label> <Select name="gender"> <option disabled> </option> <option value="1"></option> <option value="2"></option> </Select> {this.getError('gender')} </div> <div> <div>{this.props.vBoo.getLabel('familyStatus')}:</div> <div> <InputRadio name="familyStatus" value="1" checked /> <label></label> </div> <div> <InputRadio name="familyStatus" value="2" /> <label></label> </div> <div> <InputRadio name="familyStatus" value="3" /> <label></label> </div> {this.getError('familyStatus')} </div> <div> <label>{this.props.vBoo.getLabel('comment')}:</label> <Textarea name="comment"></Textarea> {this.getError('comment')} </div> <div> <label>{this.props.vBoo.getLabel('remember')}:</label> <InputCheckbox name="remember" value="yes" /> {this.getError('remember')} </div> <button onClick={this.sendForm}> {this.props.vBoo.isValid() ? ' ': ' !!!'} </button> </Form> } } export default connect({ rules: () => ([ [ ['name', 'email'], 'required', { error: '%name%    ' } ], ['email', 'email'], [['gender', 'familyStatus', 'comment', 'remember'], 'valid'] ]), labels: () => ({ name: '', email: ' ', gender: '', familyStatus: ' ', comment: '', remember: '' }), lang: 'ru' })(MyForm);

मान्यता नियम

आइए देखें कि हमारे अपने सत्यापन नियमों को कैसे लिखा जाए।
एक नियम लिखने के लिए, आपको एक वर्ग बनाना होगा जो सत्यापनकर्ता वर्ग से विरासत में मिला होगा।

 import {validator} from 'react-validation-boo'; class myValidator extends validator { /** * name -  ,   label    * value -    * params -     3-    (rules) */ validate(name, value, params) { let lang = this.getLang(); let pattern = /^\d+$/; if(!pattern.test(value)) { let error = params.error || '   %name%   %value%'; error = error.replace('%name%', name); error = error.replace('%value%', value); this.addError(error); } } } export default myValidator;

अब हमारे सत्यापनकर्ता को फ़ॉर्म से कनेक्ट करें।

 import myValidator from 'path/myValidator'; // ... export default connect({ rules: () => ([ [ 'name', 'required', { error: '%name%    ' } ], [ 'name', 'myValidator', { error: '   params.error' } ] ]), labels: () => ({ name: '' }), validators: { myValidator }, lang: 'ru' })(MyForm);

प्रत्येक बार अपने सभी सत्यापन नियमों को पंजीकृत नहीं करने के लिए, एक अलग फ़ाइल बनाएं जहां वे पंजीकृत होंगे और इसके सत्यापनकर्ताओं को जोड़ेंगे : `आयात 'फ़ाइल-सत्यापन` ` । और अगर इस फॉर्म के लिए कोई विशेष नियम हैं, तो सत्यापनकर्ता: Object.assign ({}, `आयात 'फ़ाइल-सत्यापन` `, {...})

परिदृश्यों

उन मामलों पर विचार करें जब हमें फॉर्म पर किए गए कार्यों के आधार पर सत्यापन नियमों को बदलने की आवश्यकता होती है।

डिफ़ॉल्ट रूप से, हमारे पास एक स्क्रिप्ट होती है जिसे डिफ़ॉल्ट कहा जाता है , नियमों में हम इस मान्यता को संचालित करने के लिए किस परिदृश्य में निर्दिष्ट कर सकते हैं।

यदि कोई स्क्रिप्ट निर्दिष्ट नहीं है, तो सभी परिदृश्यों के लिए सत्यापन किया जाएगा।

 rules = () => ([ [ 'name', 'required', { error: '%name%    ' } ], [ 'name', 'myValidator', { scenario: ['default', 'scenario1'] } ], [ 'email', 'email', { scenario: 'scenario1' } ] ])

समारोह हमारे घटक की संपत्ति संपत्ति के माध्यम से पारित किया है:

vBoo.setScenario (परिदृश्य) - परिदृश्य स्क्रिप्ट सेट करता है, यह या तो एक स्ट्रिंग या एक सरणी हो सकता है, अगर हमारे पास एक साथ कई स्क्रिप्ट सक्रिय हैं
vBoo.getScenario () - स्क्रिप्ट की वर्तमान स्क्रिप्ट या सरणी लौटाता है
vBoo.hasScenario (नाम) - क्या यह स्क्रिप्ट अभी स्थापित है, नाम स्ट्रिंग

आइए हमारे रूप में एक दर्शनीय वस्तु जोड़ें, जिसमें हम सभी संभव स्क्रिप्ट संग्रहीत करेंगे, सही है कि स्क्रिप्ट सक्रिय है, गलत नहीं है।

साथ ही साथ AddScenaries और DeleteScenaries फ़ंक्शंस जो स्क्रिप्ट जोड़ और हटा देंगे।

यदि हमारे पास "सहवास" या "विवाह" है, तो हम एक टिप्पणी क्षेत्र जोड़ते हैं और स्वाभाविक रूप से इस क्षेत्र को केवल इस मामले में मान्य किया जाना चाहिए, परिदृश्य-विवाहित परिदृश्य ।

यदि हमारे पास "उन्नत" चेकबॉक्स सेट है, तो हम अतिरिक्त फ़ील्ड जोड़ते हैं जिनकी आवश्यकता होगी, स्क्रिप्ट ' परिदृश्य-जोड़ '।

 import React, {Component} from 'react'; import {connect, Form, Input, Select, InputRadio, InputCheckbox, Textarea} from 'react-validation-boo'; class MyForm extends Component { constructor() { super(); this.scenaries = { 'scenario-married': false, 'scenario-addition': false } } changeScenaries(addScenaries = [], deleteScenaries = []) { addScenaries.forEach(item => this.scenaries[item] = true); deleteScenaries.forEach(item => this.scenaries[item] = false); let scenario = Object.keys(this.scenaries) .reduce((result, item) => this.scenaries[item]? result.concat(item): result, []); this.props.vBoo.setScenario(scenario); } addScenaries = (m = []) => this.changeScenaries(m, []); deleteScenaries = (m = []) => this.changeScenaries([], m); sendForm = (event) => { event.preventDefault(); if(this.props.vBoo.isValid()) { console.log('       ', this.props.vBoo.getValues()); } else { console.log('   ', this.props.vBoo.getErrors()); } }; getError = (name) => { return this.props.vBoo.hasError(name) ? <div className="error">{this.props.vBoo.getError(name)}</div> : ''; }; changeFamilyStatus = (event) => { let val = event.target.value; if(val !== '1') { this.addScenaries(['scenario-married']) } else { this.deleteScenaries(['scenario-married']); } }; changeAddition = (event) => { let check = event.target.checked; if(check) { this.addScenaries(['scenario-addition']) } else { this.deleteScenaries(['scenario-addition']); } }; getCommentContent() { if(this.props.vBoo.hasScenario('scenario-married')) { return ( <div key="comment-content"> <label>{this.props.vBoo.getLabel('comment')}:</label> <Textarea name="comment"></Textarea> {this.getError('comment')} </div> ); } return ''; } getAdditionContent() { if(this.props.vBoo.hasScenario('scenario-addition')) { return ( <div key="addition-content"> <label>{this.props.vBoo.getLabel('place')}:</label> <Input type="text" name="place" /> {this.getError('place')} </div> ); } return ''; } render() { return <Form connect={this.props.vBoo.connect}> <div> <label>{this.props.vBoo.getLabel('name')}:</label> <Input type="text" name="name" /> {this.getError('name')} </div> <div> <label>{this.props.vBoo.getLabel('email')}:</label> <Input type="text" name="email" value="default@mail.ru" /> {this.getError('email')} </div> <div> <label>{this.props.vBoo.getLabel('gender')}:</label> <Select name="gender"> <option disabled> </option> <option value="1"></option> <option value="2"></option> </Select> {this.getError('gender')} </div> <div> <div>{this.props.vBoo.getLabel('familyStatus')}:</div> <div> <InputRadio name="familyStatus" value="1" checked onChange={this.changeFamilyStatus} /> <label></label> </div> <div> <InputRadio name="familyStatus" value="2" onChange={this.changeFamilyStatus} /> <label></label> </div> <div> <InputRadio name="familyStatus" value="3" onChange={this.changeFamilyStatus} /> <label></label> </div> {this.getError('familyStatus')} </div> {this.getCommentContent()} <div> <label>{this.props.vBoo.getLabel('addition')}:</label> <InputCheckbox name="addition" value="yes" onChange={this.changeAddition} /> {this.getError('addition')} </div> {this.getAdditionContent()} <button onClick={this.sendForm}> {this.props.vBoo.isValid() ? ' ': ' !!!'} </button> </Form> } } export default connect({ rules: () => ([ [ ['name', 'gender', 'familyStatus', 'email'], 'required', { error: '%name%    ' } ], ['email', 'email'], [ 'comment', 'required', { scenario: 'scenario-married' } ], ['addition', 'valid'], [ 'place', 'required', { scenario: 'scenario-addition' } ], ]), labels: () => ({ name: '', email: ' ', gender: '', familyStatus: ' ', comment: '', addition: '', place: '' }), lang: 'ru' })(MyForm);

लेख को बहुत बड़ा नहीं बनाने के लिए, मैं अगले एक में जारी रखूंगा, जहां मैं लिखूंगा कि कैसे मैं अपने खुद के घटकों (उदाहरण के लिए, एक कैलेंडर या इनपुट खोज) बनाऊं और उन्हें मान्य करूं, कैसे रिड्यूक्स और अधिक से संबंधित करने के लिए।

प्रतिक्रिया के जटिल रूपों का सत्यापन। भाग 1

VBoo कोर घटक

मान्यता नियम

परिदृश्यों

More articles: