उपयोगकर्ता के टाइप करते ही इनपुट की पुष्टि करना

उपयोगकर्ता के टेक्स्ट फ़ील्ड में टाइप करते समय, इनपुट की पुष्टि की जा सकती है. जैसे, नाम, ईमेल, पता या अन्य संपर्क जानकारी डालते समय. इस पुष्टि से, गड़बड़ियां कम होती हैं और उपयोगकर्ताओं का समय बचता है.

नतीजे

मान्य टेक्स्ट इनपुट
पहली इमेज. यह टेक्स्ट इनपुट फ़ील्ड है. इसमें ईमेल की पुष्टि करने वाले टूल मौजूद हैं. हालांकि, मान्य ईमेल पते के लिए कोई गड़बड़ी का मैसेज नहीं दिख रहा है.
गड़बड़ियों वाला अमान्य टेक्स्ट इनपुट
दूसरी इमेज. टेक्स्ट डालने के लिए बने फ़ील्ड में, अमान्य ईमेल पता डालने पर दिखने वाला गड़बड़ी का मैसेज.

वर्शन के साथ काम करने की सुविधा

इस सुविधा को लागू करने के लिए, आपके प्रोजेक्ट का minSDK, एपीआई लेवल 21 या इससे ज़्यादा पर सेट होना चाहिए.

डिपेंडेंसी

उपयोगकर्ता के टाइप करते समय इनपुट की पुष्टि करना

उपयोगकर्ता के टाइप करते समय फ़ील्ड इनपुट दिखाने और टेक्स्ट की पुष्टि करने के लिए, इस कोड का इस्तेमाल करें. अगर जानकारी की पुष्टि नहीं होती है, तो गड़बड़ी का मैसेज दिखता है. इससे उपयोगकर्ता को इनपुट ठीक करने में मदद मिलती है.

class EmailViewModel : ViewModel() {
    var email by mutableStateOf("")
        private set

    val emailHasErrors by derivedStateOf {
        if (email.isNotEmpty()) {
            // Email is considered erroneous until it completely matches EMAIL_ADDRESS.
            !android.util.Patterns.EMAIL_ADDRESS.matcher(email).matches()
        } else {
            false
        }
    }

    fun updateEmail(input: String) {
        email = input
    }
}

@Composable
fun ValidatingInputTextField(
    email: String,
    updateState: (String) -> Unit,
    validatorHasErrors: Boolean
) {
    OutlinedTextField(
        modifier = Modifier
            .fillMaxWidth()
            .padding(10.dp),
        value = email,
        onValueChange = updateState,
        label = { Text("Email") },
        isError = validatorHasErrors,
        supportingText = {
            if (validatorHasErrors) {
                Text("Incorrect email format.")
            }
        }
    )
}

@Preview
@Composable
fun ValidateInput() {
    val emailViewModel: EmailViewModel = viewModel<EmailViewModel>()
    ValidatingInputTextField(
        email = emailViewModel.email,
        updateState = { input -> emailViewModel.updateEmail(input) },
        validatorHasErrors = emailViewModel.emailHasErrors
    )
}

कोड के बारे में अहम बातें

  • यह एक ऐसा कंपोज़ेबल तय करता है जो OutlinedTextField कॉम्पोनेंट का फिर से इस्तेमाल करता है. साथ ही, उपयोगकर्ता के टाइप के तौर पर पुष्टि करने वाले टूल से जुड़ी गड़बड़ी के मैसेज दिखाने के लिए, ज़रूरी पैरामीटर जोड़ता है.
  • EmailViewModel का इस्तेमाल, स्थिति को बनाए रखने और ईमेल की पुष्टि करने का लॉजिक देने के लिए किया जाता है.
  • अगर isError सही है, तो यूज़र इंटरफ़ेस (यूआई) में, पुष्टि करने से जुड़ी गड़बड़ी की स्थिति का विज़ुअल इंडिकेटर दिखता है.
  • जब तक पूरा और सही ईमेल पता नहीं डाला जाता, तब तक कॉम्पोनेंट में "ईमेल का फ़ॉर्मैट गलत है" मैसेज दिखेगा.

ऐसे कलेक्शन जिनमें यह गाइड शामिल है

यह गाइड, चुनी गई Quick Guide के इन कलेक्शन का हिस्सा है. इनमें Android डेवलपमेंट के ज़्यादातर लक्ष्यों के बारे में बताया गया है:

टेक्स्ट, किसी भी यूज़र इंटरफ़ेस (यूआई) का मुख्य हिस्सा होता है. उपयोगकर्ता को बेहतर अनुभव देने के लिए, अपने ऐप्लिकेशन में टेक्स्ट दिखाने के अलग-अलग तरीके जानें.
जानें कि उपयोगकर्ताओं को टेक्स्ट डालने और इनपुट के अन्य तरीकों का इस्तेमाल करके, आपके ऐप्लिकेशन से इंटरैक्ट करने की सुविधा कैसे दी जाती है.

सवाल पूछना या सुझाव/राय देना

अक्सर पूछे जाने वाले सवालों वाले पेज पर जाएं और क्विक गाइड के बारे में जानें. इसके अलावा, हमसे संपर्क करें और हमें अपने सुझाव/राय दें या शिकायत करें.