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 kesalahan dan menghemat waktu pengguna Anda.

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.

Kompatibilitas versi

Implementasi ini mengharuskan minSDK project Anda ditetapkan ke level API 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 mengoreksi 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 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 menyediakan 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.

Koleksi yang berisi panduan ini

Panduan ini adalah bagian dari koleksi Panduan Cepat pilihan yang mencakup tujuan pengembangan Android yang lebih luas:

Teks tampilan

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

Ada pertanyaan atau masukan?

Buka halaman pertanyaan umum (FAQ) kami dan pelajari panduan singkat atau hubungi kami dan sampaikan pendapat Anda.
Buka FAQ Beri masukan