👇 🛸 👩🏾‍🌾 Django में अजाक्स प्रपत्र सत्यापन 🤚🏽 🤶🏼 ㊙️

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

जब अजाक्स का उपयोग करते हुए रूपों को मान्य किया जाता है, तो हमें निम्नलिखित लाभ मिलते हैं:

उपयोगकर्ता पृष्ठ डेटा के मान्य होने तक पुनः लोड नहीं करता है;
रूप फिर से नहीं है;
प्रपत्र सत्यापन का तर्क एक ही स्थान पर वर्णित है।

यदि आप रुचि रखते हैं, तो बिल्ली में आपका स्वागत है।

संक्षेप में सब कुछ कैसे काम करता है:

जावास्क्रिप्ट हैंडलर एक विशिष्ट वर्ग के साथ पृष्ठ पर सभी रूपों के लिए "सबमिट" ईवेंट को पकड़ता है, उदाहरण के लिए, मान्यफ़ॉर्म;
जब "सबमिट" घटना होती है, तो हैंडलर फॉर्म डेटा और उसके पहचानकर्ता को एक विशिष्ट पते से गुजरता है;
वह दृश्य जो इस पते से अनुरोध करता है:
1. प्रपत्र को इनिशियलाइज़ करता है;
2. डेटा को सत्यापित करता है;
3. सत्यापन की सफलता या त्रुटियों वाली सूची के बारे में प्रतिक्रिया वापस देता है, यदि कोई हो;
सफल सत्यापन के बाद, हैंडलर सामान्य तरीके से फॉर्म डेटा भेजने की अनुमति देता है, अन्यथा यह त्रुटि पाठ प्रदर्शित करता है।

आलेख सत्यापन के सर्वर भाग के कार्यान्वयन के बारे में अधिक विस्तार से वर्णन करेगा। हेब्रोसोसिटी से ब्याज के साथ, क्लाइंट भाग का अधिक विस्तार से वर्णन करना संभव होगा।
आइए देखें कि कैसे सब कुछ काम करता है, उदाहरण के रूप में प्राधिकरण फॉर्म का उपयोग करता है।

सर्वर साइड

की प्रस्तुति

एक दृश्य बनाएं जो प्राधिकरण फ़ॉर्म के साथ काम करेगा:

class SignIn(FormView): form_class = SignInForm template_name = 'valid.html' def form_valid(self, form): user = authenticate(**form.cleaned_data) if user: login(self.request, user) return HttpResponseRedirect('/')

जैसा कि आप देख सकते हैं, हमारे अजाक्स से संबंधित कोई अतिरिक्त तर्क नहीं है
प्रसंस्करण यहाँ नहीं है।

अब हम एक दृश्य लिखेंगे जो अजाक्स अनुरोधों को संभालेंगे:

 class AjaxValidation(FormView): form_dict = { 'signin': SignInForm, } def get(self, request, *args, **kwargs): return HttpResponseRedirect('/') def form_invalid(self, form): data = [] for k, v in form._errors.iteritems(): text = { 'desc': ', '.join(v), } if k == '__all__': text['key'] = '#%s' % self.request.POST.get('form') else: text['key'] = '#id_%s' % k data.append(text) return HttpResponse(json.dumps(data)) def form_valid(self, form): return HttpResponse("ok") def get_form_class(self): return self.form_dict[self.request.POST.get('form')]

यहां हम AjaxValidation दृश्य बनाते हैं, जो यदि फॉर्म मान्य नहीं है, तो निम्न फॉर्म के Json प्रारूप में वस्तुओं की सूची के रूप में क्लाइंट साइड में त्रुटियों को प्रसारित करेगा:

 [{“key”: ”#id_email”, “desc”: ”  email ”}, {“key”: ”...”, “desc”: ”...”}]

इसमें हम उस फ़ील्ड के पहचानकर्ता को इंगित करते हैं जिसमें त्रुटि उत्पन्न हुई थी, फ्रेमवर्क द्वारा उत्पन्न मानक प्रारूप के अनुसार - "id_ <फ़ील्ड का नाम>", या फॉर्म का नाम यदि यह त्रुटि फॉर्म के कुछ क्षेत्रों पर लागू नहीं होती है। हम फॉर्म सत्यापन के आधार पर प्राप्त त्रुटि पाठ को भी प्रसारित करते हैं।
फॉर्म_ डिक्शन डिक्शनरी में, हम फॉर्म पहचानकर्ता और सत्यापन के लिए संबंधित फॉर्म क्लास को निर्दिष्ट करते हैं।

कभी-कभी, उचित सत्यापन के लिए, प्रपत्र को अतिरिक्त तर्कों की आवश्यकता होती है। वे get_form_kwargs विधि को ओवरराइड करके पारित किया जा सकता है, उदाहरण के लिए, इस तरह:

  def get_form_kwargs(self): kwargs = super(AjaxValidation, self).get_form_kwargs() cls = self.get_form_class() if hasattr(cls, 'get_arguments'): kwargs.update(cls.get_arguments(self)) return kwargs

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

विधि स्वयं इस तरह दिख सकती है:

  @staticmethod def get_arguments(arg): user = arg.request.user return {'instance': user}

इस मामले में, हम अपने तरीके में AjaxValidation का एक उदाहरण देते हैं, जिसमें से हमें उपयोगकर्ता ऑब्जेक्ट मिलता है। फिर इसे हमारे रूप में एक तर्क के रूप में पारित करें।

आकार

अगला, प्रपत्र वर्ग पर विचार करें:

 class SignInForm(forms.Form): email = forms.EmailField(widget=forms.TextInput(attrs={'humanReadable': 'E-mail'}), label='E-mail') password = forms.CharField(min_length=6, max_length=32, widget=forms.PasswordInput(attrs={'humanReadable': ''}), label='') def clean(self): if not self._errors: cleaned_data = super(SignInForm, self).clean() email = cleaned_data.get('email') password = cleaned_data.get('password') try: user = User.objects.get(email=email) if not user.check_password(password): raise forms.ValidationError(u'  e-mail \ .') elif not user.is_active: raise forms.ValidationError(u'   e-mail .') except User.DoesNotExist: raise forms.ValidationError(u'   e-mail  .') return cleaned_data

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

सत्यापन में, सब कुछ काफी सरल है: हम जांचते हैं कि उपयोगकर्ता का ईमेल डेटाबेस में है या नहीं, पासवर्ड सही ढंग से निर्दिष्ट है और उपयोगकर्ता अवरुद्ध नहीं है। चूंकि हम एक साथ कई क्षेत्रों के मूल्यों के साथ काम करते हैं, इसलिए सफाई विधि में सत्यापन किया जाता है।

टेम्पलेट

प्रत्येक परियोजना में सूचनाओं के आउटपुट की विधि भिन्न हो सकती है और फॉर्म को आउटपुट करने के लिए सबसे सरल टेम्पलेट है:

 <!DOCTYPE html> <html> <head> <title></title> </head> <body> <form class='validForm' id='signin' humanReadable=' ' method='post' action=''> <div class='validation_info'></div> {{ form.as_ul }} {% csrf_token %} <input type='submit'> </form> </body> </html>

सत्यापन_इनफो वर्ग के साथ ब्लॉक में, उस क्षेत्र का नाम जो हमें मानवीय गुण से प्राप्त होता है और फ्रेमवर्क द्वारा उत्पन्न त्रुटि पाठ प्रदर्शित किया जाएगा।

ग्राहक भाग

हमारे मामले में अजाक्स सत्यापन के साथ काम करने के लिए आवश्यक है कि प्रत्येक फॉर्म को सौंपा जाए
आईडी। इस पहचानकर्ता का उपयोग करते हुए, हम प्रपत्र_dict चर में संबंधित वर्ग के लिए प्रपत्र को बांधते हैं। प्रत्येक मान्य फॉर्म में एक मान्य वर्ग होना चाहिए, फिर जावास्क्रिप्ट हैंडलर इसके साथ काम करना शुरू कर देगा।

जावास्क्रिप्ट कोड स्वयं इस प्रकार है:

 (function(){ var _p = project; _p.setupValidator = function($f){ var targetInputs = $f.find('input,textarea,select'), infoElement = $f.find('.validation_info'); targetInputs.add($f).each(function(){ var $i = $(this), hR = $i.attr('humanReadable'); $i.data('showErrorMessage',function(msg){ infoElement.append($('<p/>').html(hR+': '+msg)); }); }); $f.on('submit', function(e, machineGenerated) { if(machineGenerated) return; infoElement.html(''); e.preventDefault(); var ser = targetInputs.serialize(); ser += '&form=' + $f.attr('id'); $.post('/ajaxValidation/', ser, function(info) { if (info != 'ok') { var errors = $.parseJSON(info); for (var i = 0; i < errors.length; i++) { var input = $f.find(errors[i].key); if($f.is(errors[i].key)){ input = $f; } if(input.data('showErrorMessage')){ input.data('showErrorMessage')(errors[i].desc); } else { console.log(input,errors[i].desc); } } } else { $f.trigger('submit', [true]); } }); }); } $(function (){ _p.setupValidator($('.'+_p.validateeFormClass)); }); })();

हैंडलर फॉर्म से सबमिट ईवेंट को पकड़ता है, $ .serialize () निष्पादित करता है,
इनपुट फ़ील्ड के लाइन आइडेंटिफ़ायर और वैल्यू में एकत्रित करना, और फॉर्म के पहचानकर्ता को भी संलग्न करता है।
यदि प्रतिक्रिया में त्रुटि संदेश प्राप्त होता है, तो हमें त्रुटि और त्रुटि पाठ के साथ ऑब्जेक्ट का पहचानकर्ता मिल जाता है। अगला, हम तत्व का एक पठनीय विवरण (प्रपत्र) और कक्षा सत्यापन के साथ तत्व में स्वयं त्रुटि पाठ प्रिंट करते हैं।

परिणाम

हमारे पास एक AjaxValidation दृश्य है जिसमें हम सब कुछ डालते हैं
ग्राहक पक्ष के साथ बातचीत। दृश्य में, हम उन रूपों को पंजीकृत करते हैं जिन्हें सत्यापित करने की आवश्यकता होती है। अतिरिक्त मापदंडों को स्थिर रूप विधि में पारित किया जा सकता है।
यह समाधान आपको अजाक्स सत्यापन के सभी लाभों का उपयोग करने की अनुमति देता है और किसी भी चीज से विचलित हुए बिना केवल कार्यक्षमता की आवश्यकता है।
Flip89 के सहयोग से