💒 🔬 👨🏾‍🍳 सिम्फनी 2 और नॉकआउट जेएस - फॉर्म सत्यापन 👿 🍻 🤚🏽

कुछ महीने पहले, मैंने लोकप्रिय Symfony2 PHP फ्रेमवर्क सीखना शुरू किया। हाल ही में, मुझे नॉकआउटJS लाइब्रेरी का उपयोग करके क्लाइंट की तरफ से फॉर्म भरने की शुद्धता की जांच करने का काम मिला। इस मामले में, सत्यापन के नियम, इसलिए कोड दोहराव में संलग्न नहीं होने के लिए, इकाई वर्ग से सिम्फनी लेने की सलाह दी जाती है।
समस्या के किसी एक पक्ष को कवर करने वाले 10,000 से अधिक प्लगइन्स, लाइब्रेरी और बंडल हैं। मुझे इसका व्यापक समाधान नहीं मिला। कार्य के पहले और दूसरे भाग के लिए दो सबसे लोकप्रिय समाधानों (नॉकआउट-वैलिडेशन और APYJsFormValidationBundle) के संयोजन की श्रमसाध्यता का अनुमान लगाने के बाद, मैंने खरोंच से सब कुछ लिखने का फैसला किया। कट के तहत विवरण।

सिम्फनी 2 में मान्यता

मेरे मामले में, सत्यापन नियम एनोटेशन में निर्धारित किए गए हैं। स्मृति को ताज़ा करने के लिए, मैं एक सूची दूंगा:

/** * Acme\UsersBundle\Entity\User */ class User implements JsonSerializable { /** * @var string $name . * * @ORM\Column(name="name", type="string", length=255, unique = true, nullable=false) * * @Assert\NotBlank(message=" ") * @Assert\MinLength(limit=3, message="  ") * @Assert\MaxLength(limit=15, message="  ") * @Assert\Regex(pattern="/^[A-z0-9_-]+$/ui", match=true, message="   ") */ private $name; // .... }

पहली बात यह है कि इन टिप्पणियों को पार्स करें। बेशक, ढांचा खुद ही ऐसा कर रहा है। पार्सिंग परिणाम पर्यावरण के आधार पर "ऐप / कैश / देव / एनोटेशन /" या "ऐप / कैश / प्रोडक्शन / एनोटेशन /" पते पर कैश में संग्रहीत किए जाते हैं। थोड़ा सोचने के बाद, मैंने एक छोटा तरीका लिखा:

 /** *    . * * @param string $bundle    "Bundle". * @param string $entity         . * @param string $env  ("dev"  "prod"). * @param string $namespace   (  "Acme"). * @return array . */ private function readEntityAnnotations($bundle, $entity, $env = 'prod', $namespace = 'Acme') { $result = array(); $files = glob($_SERVER['DOCUMENT_ROOT'] . '/../app/cache/' . $env . '/annotations/' . $namespace . '-' . $bundle .'Bundle-Entity-' . $bundle . $entity .'$*.php'); foreach ($files as $path) { //        preg_match('/\\$(.*?)\\./', $path, $matches); //   foreach (include $path as $annotation) { //       if (get_parent_class($annotation) === 'Symfony\\Component\\Validator\\Constraint') { $type = preg_replace('/^.*\\\/', '', get_class($annotation)); $annotation = (array)$annotation; unset($annotation['charset']); $result[$matches[1]][$type] = (array)$annotation; } } } return $result; }

संभवतः इस तरह के कोड का पालन करने के लिए एक बुरा उदाहरण है, लेकिन यह अपने कार्य के साथ मुकाबला करता है। मैं इसे बाद में फिर से लिखूंगा।

नतीजतन, हम ग्राहक पर कुछ समान प्राप्त कर सकते हैं:
एनोटेशन

मान्यता और नॉकआउट जे.एस.

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

 var myComplexValue = ko.observable() myComplexValue.extend({ required: true }) .extend({ minLength: 42 }) .extend({ pattern: { message: 'Hey this doesnt match my pattern', params: '^[A-Z0-9].$' }});

यही है, सार एक्सटेंडर के उपयोग में है जो दूसरी नॉकआउट शाखा से दिखाई दिया। एक्सटेंडर आपको किसी भी प्रकार के वेधशाला के व्यवहार को संशोधित करने या पूरक करने की अनुमति देते हैं। एक उदाहरण पर विचार करें:

var name = ko.observable('habrahabr').extend({MinLength: 42});

अवलोकन की गई प्रॉपर्टी को अपडेट करते समय, नॉकआउट MinLength नाम के एक एक्सटेंडर को खोजने की कोशिश करेगा और, यदि सफल हो, तो इसे कॉल करेगा। एक्सटेंडर के मापदंडों के रूप में, स्वयं देखी गई संपत्ति और संख्या 42 को पारित किया जाएगा।

अब हम खुद ही एक्सटेंडर लागू करते हैं:

 ko.extenders.MinLength = function(observavle, params) { // .... };

विचार स्पष्ट है, आइए कार्यान्वयन के लिए आगे बढ़ें। उदाहरण के लिए निम्नलिखित मॉडल लें:

 var AppViewModel = new (function () { var self = this; //     this.name = ko.observable(''); //   this.mail = ko.observable(''); // E-mail //   ko.validation.init(self, _ANNOTATIONS_); //    this.submit = function () { if (self.isValid()) { alert(' '); } else { alert('  '); } }; })();

Ko.validation.init और self.isValid के अपवाद के साथ, यहां सब कुछ स्पष्ट होना चाहिए। ko.validation.init एक सत्यापनकर्ता आरंभीकरण फ़ंक्शन है जो एक मॉडल और एक ऑब्जेक्ट होता है जिसमें तर्क के रूप में सिम्फनी से प्राप्त एनोटेशन जानकारी होती है। मान्यकर्ता के आरंभिक होने पर मॉडल में isValid विधि जोड़ी जाएगी।

 <form action="#"> <p> <label for=""></label> <input type="text" data-bind="value: name, valueUpdate: 'keyup'"> <span data-bind="visible: name.isError, text: name.message"></span> </p> <p> <label for="">E-mail</label> <input type="text" data-bind="value: mail, valueUpdate: 'keyup'"> <span data-bind="visible: mail.isError, text: mail.message"></span> </p> <button data-bind="click: submit"></button> </form>

ईशर और संदेश गुण क्रमशः एक त्रुटि ध्वज और एक त्रुटि संदेश है। ये दोनों गुण अवलोकनीय हैं और प्रारंभ के समय मुख्य संपत्ति में जोड़े जाते हैं।

 AppViewModel.name.isError = ko.observable(); //    AppViewModel.name.message = ko.observable(); //    AppViewModel.name.typeError = ''; //

यह पोस्ट के लक्षित दर्शकों के लिए एक समस्या नहीं होनी चाहिए, लेकिन बस के मामले में, मैं समझाता हूं: जावास्क्रिप्ट में सब कुछ एक वस्तु है, या प्रत्येक प्रकार के लिए, एक वस्तु आवरण है। आवश्यकतानुसार परिवर्तन स्वचालित रूप से होते हैं। कार्यों के लिए भी यही सच है। इसलिए, कुछ भी हमें AppViewModel.name संपत्ति में कई गुणों को जोड़ने से रोकता है, जो वास्तव में, एक फ़ंक्शन है।

प्रपत्र सत्यापन एल्गोरिथ्म इस तरह दिखेगा:
- जब तक उपयोगकर्ता फॉर्म जमा करने की कोशिश नहीं करता तब तक हम कुछ नहीं करते
- पहले के बाद, गैर-वैधता के कारण असफल, भेजना, हम प्रत्येक अपडेट (कीप और परिवर्तन) पर फ़ील्ड्स की जांच करते हैं।

अब मैं पूरा कोड दूंगा, और फिर मैं इसका विस्तार से विश्लेषण करूंगा:

 ko.validation = new (function () { /** *   . * @return {Boolean} */ var isValid = function () { this.validate(true); //      for (var opt in this) if (ko.isObservable(this[opt])) { //     if (this[opt].isError !== undefined && this[opt].isError() === true) { return false; } } return true; }; return { /** *  . * @param {object} AppViewModel  . * @param {object} annotations   . */ init: function (AppViewModel, annotations) { var asserts, options; AppViewModel.validate = ko.observable(false); //        for (var field in annotations) if (annotations.hasOwnProperty(field)) { asserts = annotations[field]; //   (AppViewModel)        if (AppViewModel[field] !== undefined && ko.isObservable(AppViewModel[field])) { AppViewModel[field].isError = ko.observable(); //    AppViewModel[field].message = ko.observable(); //    //      for (var i in asserts) if (asserts.hasOwnProperty(i)) { options = {}; options[i] = asserts[i]; //   options[i]['asserts'] = asserts; //    options[i]['AppViewModel'] = AppViewModel; //    //      AppViewModel[field].extend(options); } } } //      AppViewModel.isValid = isValid; }, /** *    . * @param name  . * @param validate  . * @param checkAsserts */ addAssert: function (name, validate, checkAsserts) { //  extender' ko.extenders[name] = function(target, option) { //     "AppViewModel.validate" ko.computed(function () { //          if (validate(target, option) === false && option.AppViewModel.validate()) { checkAsserts = checkAsserts || new Function('t,o', 'return false'); //     if (checkAsserts(target, option) === false) { target.isError(true); //    target.message(option.message); //    target.typeError = name; //   } return; } //          if (target.isError.peek() === true && target.typeError === name) { target.isError(false); } }); return target; }; } } })();

सत्यापन विधियों के एक जोड़े को तुरंत जोड़ें:

 // NotBlank ko.validation.addAssert('NotBlank', function (target, option) { return (target().length > 0); }); // MaxLength ko.validation.addAssert('MaxLength', function (target, option) { return (target().length <= option.limit); });

सामान्य उपकरण

कोड को स्टीफन स्टोयोनोव द्वारा लिखित एक डिजाइन पैटर्न "मॉड्यूल" के अनुसार अपनी पुस्तक "जावास्क्रिप्ट पैटर्न" में आयोजित किया जाता है। यानी एक अनाम तुरंत फ़ंक्शन कहा जाता है, दो तरीकों से एक वस्तु लौटाता है: init और addAssert। क्लोजर के अंदर, आइलिड विधि को परिभाषित किया गया है।

अमान्य विधि मॉडल सत्यापन

मॉडल की वैधता की जाँच करता है। विधि को मॉडल के संदर्भ में कहा जाता है, अर्थात यह isValid विधि के अंदर एक AppViewModel है। सबसे पहले, यह मान्य मॉडल की देखी गई संपत्ति को सही पर सेट करता है। यह फॉर्म जमा करने के प्रयास को इंगित करता है। वैध संपत्ति को ही init पद्धति का उपयोग करके प्रारंभ के दौरान मॉडल में जोड़ा जाता है।
अगला, विधि मॉडल के सभी देखे गए गुणों के माध्यम से चलती है और उनकी त्रुटि झंडे की जांच करती है।

Init विधि सत्यापन प्रारंभिक

सबसे पहले, विधि उपर्युक्त मान्य संपत्ति और ऊपर मॉडल के लिए isValid विधि जोड़ता है। उस चक्र के बाद यह उन क्षेत्रों से गुजरता है जिसके लिए प्रतिबंध इंगित किए जाते हैं और जिसके लिए एक ही नाम के अवलोकन योग्य गुण होते हैं, मॉडल में अंतिम जोड़ते हैं: isError और संदेश। दूसरा, नेस्टेड लूप प्रतिबंधों को दरकिनार करता है और एक उपयुक्त एक्सटेंडर के साथ क्षेत्र का विस्तार करने की कोशिश करता है। एक एक्सटेंडर पैरामीटर के रूप में, एक ऑब्जेक्ट को सिम्फनी कैश से प्राप्त प्रतिबंध मापदंडों के साथ पारित किया जाता है, मॉडल (AppViewModel) के लिंक और इस क्षेत्र के लिए सभी प्रतिबंधों की एक सूची के साथ।

AddAssert विधि। एक नया सत्यापन विधि का पंजीकरण

विधि तीन मापदंडों को लेती है: नाम - नई सत्यापन विधि का नाम, सत्यापन - सत्यापन समारोह, जाँचकर्ता - त्रुटि की पुष्टि करने वाला फ़ंक्शन। हम अंतिम पैरामीटर पर थोड़ा बाद में विचार करेंगे।
एक्सटेंडर विधि का निकाय एक अनुमानित संपत्ति में लिपटे हुए है ताकि यह सुनिश्चित हो सके कि AppViewModel.validate को अपडेट करते समय सत्यापन फिर से शुरू हो।

CheckAsserts विधि

यह AddAssert विधि के लिए एक वैकल्पिक पैरामीटर है। यह जांचना आवश्यक है कि क्या कोई अन्य सत्यापनकर्ता त्रुटि करेगा। उदाहरण के लिए, किसी फ़ील्ड में दर्ज की गई स्ट्रिंग की लंबाई की जाँच करते समय। यदि फ़ील्ड खाली है, तो मैं कहना चाहता हूं कि "फ़ील्ड भरें", और यदि यह 3 वर्णों से कम लंबा है - "नाम में कम से कम 3 वर्ण होने चाहिए", आदि। लेकिन इस बात की कोई गारंटी नहीं है कि NotLlank की तुलना में बाद में MinLength की जांच होगी। यहाँ MinLengt सत्यापन विधि (एक्सटेंडर) का एक उदाहरण है:

 // MinLength ko.validation.addAssert( 'MinLength', function (target, option) { return (target().length >= option.limit); }, function (target, option) { //       "NotBlank" return (target().length === 0 && option.asserts.NotBlank !== undefined); } );

निश्चित रूप से, आप एक निश्चित क्रम में उन्हें सॉर्ट करते हुए, सत्यापनकर्ताओं की सूची के साथ एक ऑब्जेक्ट का निर्माण कर सकते हैं। किसी ऑब्जेक्ट में संपत्तियों की गणना उनके असाइनमेंट के क्रम में होती है। यह मानकों में नहीं बताया गया है, लेकिन वास्तव में यह एक काफी विश्वसनीय नियम है। हालांकि, यह सवाल उठता है कि नॉकआउट को अंदर कैसे व्यवस्थित किया जाए और क्या अगले संस्करण में इसे व्यवस्थित किया जाएगा। तो, पहली नज़र में एक बैसाखी की तरह कार्य के साथ विकल्प मुझे अब तक इष्टतम लगता है।

के उपयोग

सत्यापन नियम उन सभी अवलोकन योग्य गुणों पर लागू होते हैं जिनमें वर्णित प्रतिबंधों के साथ सिम्फनी इकाई वर्ग में एक ही फ़ील्ड है। तदनुसार, यदि किसी भी क्षेत्र को ग्राहक की ओर से जांचने की आवश्यकता नहीं है, तो समाधान स्पष्ट है - इसे एक अलग नाम दें या एनोटेशन पढ़ते समय प्राप्त जेएस-ऑब्जेक्ट से संपत्ति को हटा दें।

कोडपेन पर एक छोटा डेमो है: codepen.io/alexismaster/pen/LAaqc

अंत में, readEntityAnnotations विधि में सुधार का वादा किया। आप सत्यापन सेवा के माध्यम से एनोटेशन प्राप्त कर सकते हैं:

 //      "name"   "User" $validator = $this->get('validator'); $metadata = $validator->getMetadataFactory()->getClassMetadata("Acme\\UsersBundle\\Entity\\User"); var_dump($metadata->properties['name']->constraints);

संदर्भ:
github.com/Abhoryo/APYJsFormValidationBundle - सिम्फनी बंडल जेएस कोड को सत्यापन के लिए जनरेट कर रहा है
github.com/Knockout-Contrib/Knockout-Validation
habrahabr.ru/post/136782 - नॉकआउट जेएस और एक्सटेंडर के बारे में एक दिलचस्प पोस्ट
phalcon-docs-ru.readthedocs.org/ru/latest/reference/annotations.html - एनोटेशन पार्सर
habrahabr.ru/post/133270 - सिम्फनी 2 में कस्टम एनोटेशन

सिम्फनी 2 और नॉकआउट जेएस - फॉर्म सत्यापन