इनपुट सत्यापन तकनीकें
डेटा की अखंडता सुनिश्चित करने के लिए सत्यापक, नियमित अभिव्यक्तियों और कस्टम तर्क का उपयोग करके फ़ॉर्म फ़ील्ड का क्लाइंट-साइड सत्यापन लागू करें।
इनपुट सत्यापन तकनीकें, CoddyKit पर Flutter मोबाइल विकास का एक निःशुल्क पाठ है। यह 4 में से 2वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह Flutter मोबाइल विकास सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Flutter मोबाइल विकास पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
इनपुट सत्यापन क्या है
जब उपयोगकर्ता आपके ऐप में डेटा दर्ज करते हैं, तो आपको यह सुनिश्चित करना होता है कि वह सही और सुरक्षित हो। इस प्रक्रिया को इनपुट सत्यापन कहा जाता है।
डेटा की गुणवत्ता बनाए रखने और त्रुटियों या सुरक्षा संबंधी समस्याओं को रोकने के लिए यह बहुत महत्वपूर्ण है, ताकि आपका ऐप अपेक्षा के अनुसार काम करे।
उपयोगकर्ता इनपुट का सत्यापन क्यों करें
मज़बूत और उपयोगकर्ता-अनुकूल ऐप बनाने में सत्यापन कई तरीकों से सहायता करता है:
- डेटा की अखंडता: यह सुनिश्चित करता है कि डेटा अपेक्षित प्रारूप में हो, जैसे ईमेल किसी ईमेल पते जैसा दिखे।
- उपयोगकर्ता अनुभव: उपयोगकर्ताओं को सही जानकारी दर्ज करने का मार्गदर्शन करता है और उनकी परेशानी कम करता है।
- सुरक्षा: ऐसे दुर्भावनापूर्ण इनपुट को रोकता है जो आपके ऐप का गलत लाभ उठा सकते हैं, जैसे SQL इंजेक्शन।
- व्यावसायिक तर्क: यह सुनिश्चित करता है कि डेटा विशेष व्यावसायिक नियमों को पूरा करे, जैसे आयु संबंधी आवश्यकताएँ या अद्वितीय उपयोगकर्ता नाम।
TextFormField सत्यापक
Flutter में TextFormField विजेट में validator नाम की एक विशेष प्रॉपर्टी होती है। यह प्रॉपर्टी इनपुट मान की जाँच करने वाला फ़ंक्शन लेती है।
यदि इनपुट अमान्य हो, तो फ़ंक्शन को एक त्रुटि संदेश (String) लौटाना चाहिए। यदि इनपुट मान्य हो, तो उसे null लौटाना चाहिए।
खाली फ़ील्ड की मूल जाँच
आइए एक ऐसे सरल सत्यापक को देखें जो जाँचता है कि टेक्स्ट फ़ील्ड खाली है या नहीं। यदि फ़ील्ड खाली हो, तो उसके नीचे एक त्रुटि संदेश दिखाई देता है।
कुछ लिखकर देखें, फिर उसे मिटाकर सबमिट करें और त्रुटि देखें।
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Validation Demo',
home: Scaffold(
appBar: AppBar(title: const Text('Basic Validation')),
body: const MyCustomForm(),
),
);
}
}
class MyCustomForm extends StatefulWidget {
const MyCustomForm({super.key});
@override
State<MyCustomForm> createState() => _MyCustomFormState();
}
class _MyCustomFormState extends State<MyCustomForm> {
final _formKey = GlobalKey<FormState>();
@override
Widget build(BuildContext context) {
return Form(
key: _formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: TextFormField(
decoration: const InputDecoration(
hintText: 'Enter your name',
labelText: 'Name',
),
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please enter some text';
}
return null;
},
),
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 16.0),
child: ElevatedButton(
onPressed: () {
if (_formKey.currentState!.validate()) {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('Processing Data')),
);
}
},
child: const Text('Submit'),
),
),
],
),
);
}
}
सत्यापन त्रुटियाँ दिखाना
जब कोई validator फ़ंक्शन String (त्रुटि संदेश) लौटाता है, तो TextFormField इस संदेश को इनपुट फ़ील्ड के नीचे अलग लाल रंग में अपने-आप दिखाता है।
यह तुरंत मिलने वाली दृश्य प्रतिक्रिया उपयोगकर्ताओं को समझने में सहायता करती है कि क्या गलत हुआ और उसे कैसे ठीक करना है, जिससे समग्र उपयोगकर्ता अनुभव बेहतर होता है।
कस्टम तर्क: पासवर्ड की जाँच
आप अपने सत्यापक फ़ंक्शन में कोई भी कस्टम तर्क लिख सकते हैं। यहाँ हम जाँचते हैं कि पासवर्ड कम से कम 6 वर्णों का है या नहीं, जो सुरक्षा की एक सामान्य प्रक्रिया है।
इससे पता चलता है कि साधारण खाली फ़ील्ड की जाँच से आगे के नियम कैसे लागू किए जाते हैं।
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Validation Demo',
home: Scaffold(
appBar: AppBar(title: const Text('Custom Validation')),
body: const MyCustomForm(),
),
);
}
}
class MyCustomForm extends StatefulWidget {
const MyCustomForm({super.key});
@override
State<MyCustomForm> createState() => _MyCustomFormState();
}
class _MyCustomFormState extends State<MyCustomForm> {
final _formKey = GlobalKey<FormState>();
@override
Widget build(BuildContext context) {
return Form(
key: _formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: TextFormField(
obscureText: true,
decoration: const InputDecoration(
hintText: 'Enter a password',
labelText: 'Password',
),
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please enter a password';
}
if (value.length < 6) {
return 'Password must be at least 6 chars';
}
return null;
},
),
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 16.0),
child: ElevatedButton(
onPressed: () {
if (_formKey.currentState!.validate()) {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('Password is valid!')),
);
}
},
child: const Text('Submit'),
),
),
],
),
);
}
}
नियमित एक्सप्रेशन (Regex)
ईमेल प्रारूप, फ़ोन नंबर या विशिष्ट अक्षरांकीय क्रम जैसी अधिक जटिल सत्यापन विधियों के लिए नियमित एक्सप्रेशन (Regex) बहुत शक्तिशाली होते हैं।
रेगेक्स वर्णों का ऐसा क्रम है जो खोज पैटर्न निर्धारित करता है। Dart की RegExp क्लास आपको इनका आसानी से उपयोग करने देती है।
Regex से ईमेल सत्यापन
ईमेल पते के प्रारूप का सत्यापन करने के लिए एक सरल नियमित एक्सप्रेशन का उपयोग इस प्रकार किया जाता है। यह एक मूल पैटर्न की जाँच करता है: text@text.domain।
याद रखें, व्यापक ईमेल सत्यापन जटिल हो सकता है, लेकिन सामान्य प्रारूपों के लिए यह रेगेक्स एक अच्छा प्रारंभिक बिंदु है।
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Regex Validation Demo',
home: Scaffold(
appBar: AppBar(title: const Text('Email Validation')),
body: const MyCustomForm(),
),
);
}
}
class MyCustomForm extends StatefulWidget {
const MyCustomForm({super.key});
@override
State<MyCustomForm> createState() => _MyCustomFormState();
}
class _MyCustomFormState extends State<MyCustomForm> {
final _formKey = GlobalKey<FormState>();
final RegExp emailRegex = RegExp(
r"^[a-zA-Z0-9.]+@[a-zA-Z0-9]+\.[a-zA-Z]+"
);
@override
Widget build(BuildContext context) {
return Form(
key: _formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: TextFormField(
keyboardType: TextInputType.emailAddress,
decoration: const InputDecoration(
hintText: 'Enter your email',
labelText: 'Email',
),
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please enter an email';
}
if (!emailRegex.hasMatch(value)) {
return 'Please enter a valid email format';
}
return null;
},
),
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 16.0),
child: ElevatedButton(
onPressed: () {
if (_formKey.currentState!.validate()) {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('Email is valid!')),
);
}
},
child: const Text('Submit'),
),
),
],
),
);
}
}
सत्यापन को मैन्युअल रूप से शुरू करना
सत्यापन आमतौर पर तब शुरू होता है जब उपयोगकर्ता फ़ॉर्म सबमिट करने का प्रयास करता है। इसके लिए बटन के onPressed हैंडलर के अंदर _formKey.currentState!.validate() को कॉल करें।
यह विधि Form के सभी सत्यापकों को चलाती है और सभी मान्य होने पर true, अन्यथा false लौटाती है। इनपुट बदलने पर उनका सत्यापन करने के लिए आप Form विजेट पर autovalidateMode का भी उपयोग कर सकते हैं, जैसा कि उदाहरण में दिखाया गया है।
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Auto Validate Demo',
home: Scaffold(
appBar: AppBar(title: const Text('Auto-Validation')),
body: const MyCustomForm(),
),
);
}
}
class MyCustomForm extends StatefulWidget {
const MyCustomForm({super.key});
@override
State<MyCustomForm> createState() => _MyCustomFormState();
}
class _MyCustomFormState extends State<MyCustomForm> {
final _formKey = GlobalKey<FormState>();
@override
Widget build(BuildContext context) {
return Form(
key: _formKey,
// Auto-validate as user types
autovalidateMode: AutovalidateMode.always,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: TextFormField(
decoration: const InputDecoration(
hintText: 'Enter text (min 3 chars)',
labelText: 'Input',
),
validator: (value) {
if (value == null || value.length < 3) {
return 'Must be at least 3 characters';
}
return null;
},
),
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 16.0),
child: ElevatedButton(
onPressed: () {
// Manual validation still works
if (_formKey.currentState!.validate()) {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('Input is valid!')),
);
}
},
child: const Text('Submit'),
),
),
],
),
);
}
}
सत्यापन जाँच
निम्नलिखित में से कौन-से Flutter में इनपुट सत्यापन लागू करने के मान्य तरीके हैं?
दोहराव: इनपुट सत्यापन
इस पाठ में आपने Flutter में क्लाइंट-साइड इनपुट सत्यापन के बारे में सीखा।
- हमने समझा कि डेटा की अखंडता, उपयोगकर्ता अनुभव और सुरक्षा के लिए सत्यापन आवश्यक क्यों है।
- आपने सत्यापन नियम निर्धारित करने के लिए
TextFormFieldकीvalidatorप्रॉपर्टी का उपयोग किया। - हमने कस्टम तर्क लागू करना और जटिल पैटर्न के लिए
RegExpका उपयोग करना सीखा। - अंत में, आपने
_formKey.currentState!.validate()औरautovalidateModeका उपयोग करके सत्यापन शुरू करना देखा।
बहुत अच्छा! अब आप अधिक मज़बूत और उपयोगकर्ता-अनुकूल फ़ॉर्म बना सकते हैं।
एआई शिक्षक के साथ Dart सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 22
- पाठ
- 88
अक्सर पूछे जाने वाले प्रश्न
क्या “इनपुट सत्यापन तकनीकें” पाठ निःशुल्क है?
हाँ — Flutter मोबाइल विकास अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “इनपुट सत्यापन तकनीकें” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। Flutter मोबाइल विकास पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“इनपुट सत्यापन तकनीकें” में मैं क्या सीखूँगा?
डेटा की अखंडता सुनिश्चित करने के लिए सत्यापक, नियमित अभिव्यक्तियों और कस्टम तर्क का उपयोग करके फ़ॉर्म फ़ील्ड का क्लाइंट-साइड सत्यापन लागू करें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Flutter मोबाइल विकास का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या Flutter मोबाइल विकास शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Flutter मोबाइल विकास शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 2वाँ पाठ है।
“इनपुट सत्यापन तकनीकें” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस Flutter मोबाइल विकास पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर Flutter मोबाइल विकास पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- Form विजेट और नियंत्रक
- इनपुट सत्यापन तकनीकें
- कस्टम फ़ॉर्म फ़ील्ड
- फ़ोकस, कीबोर्ड और इनपुट UX