在使用者輸入時驗證輸入內容

您可以在使用者於文字欄位中輸入內容時驗證輸入內容，例如輸入姓名、電子郵件地址、地址或其他聯絡資訊。這項驗證可減少錯誤，並節省使用者時間。

結果

有效的文字輸入內容 — **圖 1.** 文字輸入欄位，其中電子郵件驗證工具顯示有效電子郵件地址的錯誤訊息。

輸入的文字無效，且有錯誤 — **圖 2.** 文字輸入欄位，輸入無效電子郵件地址時會顯示錯誤訊息。

版本相容性

這項實作作業需要將專案 minSDK 設為 API 級別 21 以上。

依附元件

在使用者輸入時驗證輸入內容

請使用下列程式碼顯示欄位輸入內容，並在使用者輸入文字時驗證文字。如果資訊未通過驗證，錯誤訊息會協助使用者修正輸入內容。

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