Android Academy · Pelajaran

Mengesahkan Input

Semak input dan paparkan ralat yang membantu.

Pelajaran 3 daripada 413 langkah

Mengesahkan Input ialah pelajaran Android Academy percuma di CoddyKit. Ini ialah pelajaran 3 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Android Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Android Academy merangkumi sejumlah 4 pelajaran.

Mengapa Mengesahkan Input

Pengguna boleh melakukan kesilapan: nama kosong, e-mel dalam format salah, atau kata laluan terlalu pendek. Borang yang baik mengesan perkara ini lebih awal dan menerangkan dengan jelas perkara yang perlu diperbaiki.

Dalam pelajaran ini, anda akan menambahkan pengesahan pada borang Compose, memaparkan ralat sebaris dan melumpuhkan butang hantar sehingga semuanya sah.

Peraturan Pengesahan Hanyalah Fungsi

Kekalkan logik pengesahan sebagai fungsi Kotlin biasa yang menerima nilai dan mengembalikan sama ada nilai itu sah (atau mesej ralat). Ini menjadikan peraturan boleh digunakan semula dan mudah diuji.

Berikut ialah semakan e-mel yang mudah.

fun emailError(email: String): String? = when {
    email.isBlank() -> "Email is required"
    !email.contains("@") -> "Enter a valid email"
    else -> null
}

Memaparkan Ralat pada Medan

OutlinedTextField mempunyai bendera isError dan slot supportingText. Gabungkan kedua-duanya untuk memaparkan medan merah bersama mesej di bawahnya.

Ralat itu datang terus daripada fungsi pengesahan anda.

var email by remember { mutableStateOf("") }
val error = emailError(email)

OutlinedTextField(
    value = email,
    onValueChange = { email = it },
    label = { Text("Email") },
    isError = error != null,
    supportingText = { if (error != null) Text(error) }
)

Jangan Beri Amaran Terlalu Awal

Memaparkan "E-mel diperlukan" sebelum pengguna menyentuh medan itu terasa tidak mesra. Penyelesaian yang biasa ialah menjejak sama ada medan telah disentuh dan hanya memaparkan ralat selepas itu.

Di sini, kami menandakan medan sebagai telah disentuh sebaik sahaja medan itu kehilangan fokus.

var email by remember { mutableStateOf("") }
var touched by remember { mutableStateOf(false) }
val error = if (touched) emailError(email) else null

OutlinedTextField(
    value = email,
    onValueChange = { email = it },
    label = { Text("Email") },
    isError = error != null,
    modifier = Modifier.onFocusChanged {
        if (!it.isFocused) touched = true
    }
)

Mengesahkan Kata Laluan

Kata laluan biasanya mempunyai beberapa peraturan. Kembalikan peraturan pertama yang gagal supaya pengguna membaiki satu perkara pada satu-satu masa.

Perhatikan bahawa ini masih fungsi tulen tanpa UI di dalamnya.

fun passwordError(pw: String): String? = when {
    pw.length < 8 -> "At least 8 characters"
    pw.none { it.isDigit() } -> "Add a number"
    pw.none { it.isUpperCase() } -> "Add an uppercase letter"
    else -> null
}

Pengesahan Merentas Medan

Sesetengah peraturan melibatkan dua medan, seperti "pengesahan kata laluan mesti sepadan dengan kata laluan". Peraturan ini tidak boleh diletakkan dalam fungsi satu medan, jadi kirakannya di tempat kedua-dua nilai tersedia.

var password by remember { mutableStateOf("") }
var confirm by remember { mutableStateOf("") }

val confirmError =
    if (confirm.isNotEmpty() && confirm != password)
        "Passwords don't match"
    else null

Melumpuhkan Penghantaran sehingga Sah

Seluruh borang sah apabila setiap peraturan dipenuhi. Kirakan satu boolean dan gunakannya untuk mendayakan atau melumpuhkan butang hantar.

Ini menghalang pengguna daripada menghantar data yang tidak sah sejak awal.

val formValid =
    emailError(email) == null &&
    passwordError(password) == null &&
    confirmError == null

Button(onClick = { submit() }, enabled = formValid) {
    Text("Create Account")
}

Mengesahkan Semasa Penghantaran

Pengesahan sebaris membimbing pengguna, tetapi anda juga patut menyemak semula semuanya apabila mereka menekan butang hantar. Pengendali penghantaran menentukan sama ada proses diteruskan atau semua ralat dipaparkan serentak.

fun onSubmit() {
    val errors = listOfNotNull(
        emailError(email),
        passwordError(password)
    )
    if (errors.isEmpty()) {
        register(email, password)
    } else {
        // show errors / mark fields touched
    }
}

Mengehadkan Perkara yang Boleh ditaip

Pengesahan juga boleh bersifat pencegahan. Untuk nombor telefon, abaikan sahaja aksara bukan digit dalam onValueChange supaya input yang tidak sah tidak pernah masuk ke dalam keadaan.

Ini lebih mesra daripada memarahi pengguna selepas itu.

var phone by remember { mutableStateOf("") }

OutlinedTextField(
    value = phone,
    onValueChange = { input ->
        phone = input.filter { it.isDigit() }.take(10)
    },
    label = { Text("Phone") }
)

Memusatkan Pengesahan dalam ViewModel

Untuk skrin sebenar, kekalkan pengesahan dalam ViewModel supaya UI hanya memaparkan hasilnya. ViewModel mendedahkan ralat dan bendera isValid.

Ini memastikan komponen boleh gubah kekal ringkas dan peraturan anda boleh diuji sebagai ujian unit.

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

    val emailError: String?
        get() = emailError(email)

    val isValid: Boolean
        get() = emailError == null && email.isNotBlank()

    fun onEmailChange(value: String) { email = value }
}

Kotlin Tulen: Menguji Peraturan

Oleh sebab pengesah ialah fungsi tulen, anda boleh menjalankannya di mana-mana sahaja. Di sini, peraturan e-mel dan kata laluan dilaksanakan secara kendiri, sama seperti cara ujian unit memanggilnya.

fun emailError(email: String): String? = when {
    email.isBlank() -> "Email is required"
    !email.contains("@") -> "Enter a valid email"
    else -> null
}

fun main() {
    println(emailError(""))
    println(emailError("nope"))
    println(emailError("ada@dev.io"))
}

Semakan Pantas

Pasangan sifat manakah pada OutlinedTextField yang digunakan untuk menandakan medan sebagai tidak sah dan memaparkan mesej di bawahnya?

Jawab dalam pelajaran interaktif

Ringkasan

Kini anda boleh mengesahkan borang Compose dengan kemas:

Kekalkan peraturan sebagai fungsi tulen yang mengembalikan mesej ralat atau null.
Gunakan isError + supportingText untuk memaparkan ralat, dan elakkan memberi amaran sebelum medan disentuh.
Kendalikan peraturan merentas medan di tempat kedua-dua nilai dapat dilihat.
Lumpuhkan penghantaran sehingga seluruh borang sah, dan semak semula semasa penghantaran.
Cegah input yang tidak sah dengan filter, dan pusatkan peraturan dalam ViewModel.

Seterusnya: jenis papan kekunci, tindakan IME dan pengurusan fokus.

Percuma untuk bermula

Pelajari Kotlin dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 36
Pelajaran: 152

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Mengesahkan Input” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Android Academy, termasuk “Mengesahkan Input”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Android Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Mengesahkan Input”?

Semak input dan paparkan ralat yang membantu. Anda berlatih Android Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Android Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Android Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 3 daripada 4.

Berapa lamakah pelajaran “Mengesahkan Input” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Android Academy ini?

Ya. Setiap pelajaran Android Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

← Kembali ke Android Academy