Android Academy · 课时

验证输入

Q: 「验证输入」这节课中我会学到什么？

检查输入并显示有帮助的错误信息 你通过在浏览器中直接运行的动手代码来练习 Android Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

检查输入并显示有帮助的错误信息

验证输入 是 CoddyKit 上的免费 Android Academy 课时。这是第 3 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Android Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Android Academy 课程共包含 4 节课。

为什么要验证输入

用户会犯错：姓名为空、电子邮件格式错误、密码过短。优秀的表单会尽早发现这些问题，并清楚地说明需要如何修正。

在本课中，您将为 Compose 表单添加验证、显示内联错误，并在所有内容有效之前禁用提交按钮。

验证规则只是一个函数

将验证逻辑保留为普通的 Kotlin 函数：接收一个值，并返回它是否有效（或返回一条错误信息）。这样规则就可以复用，也容易测试。

下面是一个简单的电子邮件检查。

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

在字段上显示错误

OutlinedTextField 提供了 isError 标志和 supportingText 插槽。将它们结合起来，即可显示带有下方提示信息的红色字段。

错误信息直接来自您的验证函数。

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) }
)

不要过早发出警告

用户甚至还没有操作过字段，就显示“电子邮件为必填项”，会让人感觉不友好。常见的解决办法是跟踪字段是否已被操作过，并仅在此之后显示错误。

这里会在字段失去焦点后，将其标记为已操作。

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
    }
)

验证密码

密码通常有多条规则。返回第一条未通过的规则，让用户一次只修正一个问题。

请注意，这仍然是一个不包含界面逻辑的纯函数。

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
}

跨字段验证

有些规则涉及两个字段，例如“确认密码必须与密码一致”。这些规则无法放在单字段函数中，因此应在同时能访问两个值的地方计算。

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

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

在有效之前禁用提交

所有规则都通过时，整个表单才有效。计算出一个布尔值，用它来启用或禁用提交按钮。

这样可以从一开始就阻止用户提交错误数据。

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

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

提交时验证

内联验证可以引导用户，但用户按下提交时，您还应再次检查所有内容。提交处理函数会决定是继续操作，还是一次性显示所有错误。

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

限制可输入的内容

验证也可以起到预防作用。对于电话号码，只需在 onValueChange 中忽略非数字字符，这样错误输入就不会进入状态。

这比事后责备用户更加友好。

var phone by remember { mutableStateOf("") }

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

在 ViewModel 中集中验证

对于真实界面，请将验证放在 ViewModel 中，让界面只负责显示结果。ViewModel 对外提供错误信息和 isValid 标志。

这样可组合函数保持简单，规则也可以进行单元测试。

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：测试规则

由于验证器是纯函数，您可以在任何地方运行它们。这里让电子邮件和密码规则独立执行，就像单元测试调用它们一样。

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"))
}

快速检查

OutlinedTextField 上的哪一对属性用于标记字段无效，并在字段下方显示消息？

回顾

现在，您可以清晰地验证 Compose 表单：

将规则保留为纯函数，使其返回错误信息或 null。
使用 isError + supportingText 显示错误，并避免在字段被操作前过早发出警告。
在可以同时看到两个值的地方处理跨字段规则。
在整个表单有效之前禁用提交，并在提交时再次检查。
使用 filter 阻止错误输入，并在 ViewModel 中集中管理规则。

下一步：键盘类型、IME 操作和焦点管理。

常见问题解答

「验证输入」课时是免费的吗？

是的 — 「验证输入」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Android Academy 课程的其余内容，请升级到 CoddyKit PRO。 Android Academy 课程共包含 4 节课。

「验证输入」这节课中我会学到什么？

检查输入并显示有帮助的错误信息你通过在浏览器中直接运行的动手代码来练习 Android Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Android Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Android Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 3 节课，共 4 节。

「验证输入」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Android Academy 课中编写并运行代码吗？

能。每节 Android Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Android Academy