Jetpack Compose中多个TextField如何分别展示错误提示并实现逐个校验

针对你当前的双字段表单场景，有两种常用且符合Compose声明式特性的实现方式，你可以根据表单复杂度选择：

方案1：单字段独立校验（适合少于5个字段的简单表单） #

这种方案不需要额外封装，直接给每个字段单独维护错误状态，逻辑清晰易调试：

实现步骤 #

1. 给每个输入字段新增对应的错误状态变量
2. 编写对应字段的校验规则方法
3. 输入时清空当前字段错误、输入法提交/表单提交时触发全量校验
4. TextField绑定对应的isError参数，可搭配supportingText展示直观的错误提示

完整示例代码 #

var nome by rememberSaveable { mutableStateOf("") }
var isNomeError by rememberSaveable { mutableStateOf(false) }
var email by rememberSaveable { mutableStateOf("") }
var isEmailError by rememberSaveable { mutableStateOf(false) }

// 姓名校验规则
fun validateNome(): Boolean {
    isNomeError = nome.isBlank()
    return !isNomeError
}

// 邮箱校验规则
fun validateEmail(): Boolean {
    isEmailError = if (email.isBlank()) {
        true
    } else {
        !android.util.Patterns.EMAIL_ADDRESS.matcher(email).matches()
    }
    return !isEmailError
}

// 表单全量校验，提交时调用，实现逐个校验逻辑
fun validateForm(): Boolean {
    val isNomeValid = validateNome()
    // 第一个字段不通过直接终止校验，符合逐个校验的需求
    if (!isNomeValid) return false
    val isEmailValid = validateEmail()
    if (!isEmailValid) return false
    // 所有校验通过返回true
    return true
}

Column {
    TextField(
        value = nome,
        placeholder = { Text(text = "Nome") },
        onValueChange = {
            nome = it
            isNomeError = false // 输入时自动清空错误提示
        },
        shape = RoundedCornerShape(8.dp),
        colors = TextFieldDefaults.textFieldColors(
            focusedIndicatorColor = Color.Transparent,
            unfocusedIndicatorColor = Color.Transparent,
            disabledIndicatorColor = Color.Transparent
        ),
        modifier = Modifier.align(Alignment.CenterHorizontally),
        leadingIcon = { Icon(imageVector = Icons.Default.Person, contentDescription = null) },
        isError = isNomeError,
        supportingText = {
            if (isNomeError) Text("姓名不能为空")
        },
        keyboardActions = KeyboardActions { validateNome() }
    )

    Spacer(modifier = Modifier.padding(5.dp))

    TextField(
        value = email,
        placeholder = { Text(text = "E-mail") },
        onValueChange = {
            email = it
            isEmailError = false // 输入时自动清空错误提示
        },
        shape = RoundedCornerShape(8.dp),
        colors = TextFieldDefaults.textFieldColors(
            focusedIndicatorColor = Color.Transparent,
            unfocusedIndicatorColor = Color.Transparent,
            disabledIndicatorColor = Color.Transparent
        ),
        modifier = Modifier.align(Alignment.CenterHorizontally),
        keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Email),
        leadingIcon = { Icon(imageVector = Icons.Default.Email, contentDescription = null) },
        isError = isEmailError,
        supportingText = {
            if (isEmailError) Text("请输入有效的邮箱地址")
        },
        keyboardActions = KeyboardActions { validateEmail() }
    )

    Spacer(modifier = Modifier.padding(5.dp))

    Button(
        onClick = {
            val isFormValid = validateForm()
            if (isFormValid) {
                // 校验通过，执行后续提交逻辑
            }
        },
        colors = ButtonDefaults.buttonColors(
            contentColor = colorResource(id = R.color.marron),
            backgroundColor = colorResource(id = R.color.pastel_green)
        ),
    ) {
        Text(
            text = stringResource(id = R.string.view_cad),
            color = colorResource(id = R.color.marron)
        )
    }
}

方案2：封装表单状态类（适合字段多、逻辑复杂的表单） #

如果后续表单字段会持续增加，可以把字段状态、校验逻辑封装成独立的状态类，减少Composable里的冗余代码：

示例封装代码 #

// 通用表单字段状态类
class FormFieldState<T>(
    initialValue: T,
    private val validator: (T) -> Boolean
) {
    var value by mutableStateOf(initialValue)
    var isError by mutableStateOf(false)

    fun validate(): Boolean {
        isError = !validator(value)
        return !isError
    }
}

// Composable中直接调用即可
val nomeState = remember {
    FormFieldState(
        initialValue = "",
        validator = { it.isNotBlank() }
    )
}
val emailState = remember {
    FormFieldState(
        initialValue = "",
        validator = { 
            it.isNotBlank() && Patterns.EMAIL_ADDRESS.matcher(it).matches()
        }
    )
}

// 表单提交时校验
fun validateForm(): Boolean {
    // 按顺序逐个校验即可
    return nomeState.validate() && emailState.validate()
}

后续新增字段只需要实例化一个新的FormFieldState即可，不需要重复声明value和isError变量，维护成本更低。

注意事项 #

不推荐无差别遍历所有字段校验：简单表单用逐个校验的可读性更高，而且可以控制校验顺序，优先提示用户排在前面的字段错误，符合常规用户交互习惯。如果是字段数量超过10个的复杂表单，可以结合状态类做遍历校验，但是也要注意错误提示的展示优先级。

内容的提问来源于stack exchange，提问作者Rafael Souza