Memvalidasi input saat pengguna mengetik

Anda dapat memvalidasi input saat pengguna mengetik di kolom teks, seperti memasukkan nama, email, alamat, atau informasi kontak lainnya. Validasi ini mengurangi error dan menghemat waktu pengguna.

Kompatibilitas versi

Implementasi ini mengharuskan minSDK project Anda ditetapkan ke API level 21 atau yang lebih tinggi.

Dependensi

Memvalidasi input saat pengguna mengetik

Gunakan kode berikut untuk menampilkan input kolom dan memvalidasi teks saat pengguna mengetik. Jika informasi tidak divalidasi, pesan error akan membantu pengguna memperbaiki input.

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
    )
}
TextSnippets.kt

Poin-poin penting tentang kode

  • Menentukan composable yang menggunakan kembali komponen OutlinedTextField, dengan menambahkan parameter yang diperlukan untuk menampilkan pesan error validator saat pengguna mengetik.
  • EmailViewModel digunakan untuk mempertahankan status dan memberikan logika validasi email.
  • jika isError benar, UI akan memberikan indikator visual status error validasi.
  • Komponen akan menampilkan "Format email salah" hingga email yang lengkap dan benar dimasukkan.

Hasil

Input teks yang valid
Gambar 1. Kolom input teks dengan validator email yang tidak menampilkan pesan error untuk alamat email yang valid.
Input teks tidak valid dengan error
Gambar 2. Kolom input teks yang menampilkan pesan error saat alamat email yang tidak valid dimasukkan.

Koleksi yang berisi panduan ini

Panduan ini adalah bagian dari koleksi Panduan Cepat pilihan yang membahas sasaran pengembangan Android yang lebih luas:

Teks tampilan

Teks adalah bagian utama dari setiap UI. Cari tahu berbagai cara untuk menyajikan teks di aplikasi Anda guna memberikan pengalaman pengguna yang menyenangkan.
Koleksi panduan cepat
Pelajari cara menerapkan cara bagi pengguna untuk berinteraksi dengan aplikasi Anda dengan memasukkan teks dan menggunakan cara input lainnya.
Koleksi panduan cepat

Ada pertanyaan atau masukan

Buka halaman pertanyaan umum (FAQ) dan pelajari panduan singkat atau hubungi kami dan beri tahu kami pendapat Anda.
Buka FAQ Berikan masukan