Android Jetpack Compose中如何校验单行输入框内姓名长度？

要解决这个问题，核心是把输入文本拆分成名和姓两部分，分别校验每部分的长度是否≥3字符，而不是只看总长度。下面是具体的实现步骤和代码：

核心思路 #

1. 用正则分割输入文本，处理用户输入多个空格的情况（比如"Tony Stark"）
2. 校验分割后的结果：必须至少有两个有效部分，且每部分长度都≥3
3. 根据校验结果动态修改OutlinedTextField的边框颜色

完整代码示例 #

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.material.OutlinedTextField
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

@Composable
fun NameInputField() {
    var fullName by remember { mutableStateOf("") }
    
    // 校验逻辑：拆分出名和姓，分别检查长度
    val isInputValid: Boolean by remember(fullName) {
        mutableStateOf(
            fullName.split(Regex("\\s+")) // 按任意数量空格分割
                .filter { it.isNotEmpty() } // 过滤空字符串（比如开头/结尾空格的情况）
                .let { parts ->
                    parts.size >= 2 && parts.all { it.length >= 3 }
                }
        )
    }

    Column(modifier = Modifier.padding(16.dp)) {
        OutlinedTextField(
            value = fullName,
            onValueChange = { fullName = it },
            label = { Text("请输入名和姓（空格分隔）") },
            // 根据校验结果设置边框颜色
            colors = androidx.compose.material.MaterialTheme.colors.outlinedTextFieldColors(
                focusedBorderColor = if (!isInputValid) Color.Red else androidx.compose.material.MaterialTheme.colors.primary,
                unfocusedBorderColor = if (!isInputValid) Color.Red else androidx.compose.material.MaterialTheme.colors.onSurface.copy(alpha = 0.6f)
            ),
            // 可选：添加错误提示文本
            isError = !isInputValid,
            supportingText = {
                if (!isInputValid) {
                    Text("名和姓各自至少需要3个字符，且用空格分隔")
                }
            }
        )
    }
}

关键细节说明 #

• 分割逻辑：用Regex("\\s+")分割，能处理单个或多个空格的情况，避免用户输入多个空格导致的错误判断
• 空值过滤：用filter { it.isNotEmpty() }处理用户输入开头/结尾空格的情况（比如" Tony Stark "）
• 实时校验：用remember(fullName)让校验逻辑随输入文本实时更新
• 错误状态反馈：不仅修改边框颜色，还通过isError和supportingText给用户明确的错误提示

这样就能准确判断用户输入的名和姓是否符合要求，不会再出现"tonystark"这种无空格的长字符串被误判为合法的情况。

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