التحقق من الأشكال المعقدة للتفاعل. الجزء الأول

تحتاج أولاً إلى تثبيت مكون رد فعل التحقق من الصحة ، أعتقد أنك على دراية بالتفاعل وتعرف كيفية تكوينه.

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 ) بحيث يتلقى الطرق اللازمة للعمل مع التحقق من صحة النموذج في الدعائم .

في وظيفة التجسيد للمكون الخاص بنا ، نعيد مكون النموذج الذي نربطه بقواعد التحقق من الصحة connect = {this.props.connect} . هذا تصميم ضروري للنموذج لمعرفة كيفية التحقق من صحة المكونات المتداخلة.
<Input type = "text" name = "name" /> حقل الإدخال الذي سوف نتحقق منه ، قمنا بتمرير قواعد التحقق للاتصال في خاصية القواعد . في حالتنا ، يجب ألا يكون هذا الاسم فارغًا ( مطلوب ).

لقد مررنا أيضًا الوسيطة: مسجل للتواصل لمعرفة كيفية عمل التحقق في وحدة التحكم.

في الدعائم المكون الخاص بنا ، حصلنا على مجموعة من الوظائف:

1. vboo.isValid () - إرجاع صحيح إذا تم التحقق من صحة جميع مكونات الإدخال
2. vBoo.hasError (name) - إرجاع صحيح إذا كان المكون الذي له خاصية الاسم غير صالح
3. vBoo.getError (name) - لمكون له خاصية الاسم ، يُرجع نص الخطأ

الآن سنعقدها تدريجيًا ، أولاً سنمرر اللغة للاتصال ، حتى نتمكن من تغيير قواعد التحقق اعتمادًا على اللغة ، وأيضًا إضافة حقول إضافية وقواعد التحقق.

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

في هذا المثال ، يجب تثبيت خانة الاختيار تذكر بالروسية مطلوبة ، ولكن في حالات أخرى تكون دائمًا صالحة.

قمنا أيضًا بتمرير تسميات الدوال (lang) للاتصال ، والتي تُرجع اسم الحقول في شكل قابل للقراءة.

في دعائم المكون الخاص بك ، توجد دالة getLabel (name) التي تقوم بإرجاع القيمة التي تم تمريرها إلى دالة التسميات ، أو إذا لم يكن هناك مثل هذه القيمة ، فإنها ترجع الاسم .

مكونات VBoo الأساسية

نموذج ، إدخال ، InputRadio ، InputCheckbox ، تحديد ، Textarea .

 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 ({}، "import 'file-validation``، {...})

السيناريوهات

ضع في اعتبارك الحالات التي نحتاج فيها إلى تغيير قواعد التحقق اعتمادًا على الإجراءات التي يتم تنفيذها في النموذج.

بشكل افتراضي ، لدينا برنامج نصي يسمى افتراضي ، في القواعد التي يمكننا تحديدها تحت أي سيناريو لإجراء هذا التحقق.

إذا لم يتم تحديد برنامج نصي ، فسيتم التحقق من الصحة لجميع السيناريوهات.

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

خاصية الدعائم لمكوننا تنقل الوظائف

1. vBoo.setScenario (السيناريو) - يقوم بتعيين البرنامج النصي للسيناريو ، يمكن أن يكون إما سلسلة أو مصفوفة ، إذا كان لدينا العديد من البرامج النصية النشطة في وقت واحد
2. vboo.getScenario () - لإرجاع البرنامج النصي الحالي أو مجموعة من البرامج النصية
3. 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); 

من أجل عدم جعل المقالة كبيرة جدًا ، سأستمر في المقالة التالية ، حيث سأكتب كيفية إنشاء مكوناتي (على سبيل المثال ، تقويم أو إدخال إدخال) والتحقق من صحتها ، وكيفية الربط مع redux والمزيد.