Xác thực dữ liệu đầu vào khi người dùng nhập

Bạn có thể xác thực dữ liệu đầu vào khi người dùng nhập vào một trường văn bản, chẳng hạn như nhập tên, email, địa chỉ hoặc thông tin liên hệ khác. Quy trình xác thực này giúp giảm lỗi và tiết kiệm thời gian cho người dùng.

Kết quả

Văn bản nhập hợp lệ
Hình 1. Một trường nhập dữ liệu có trình xác thực email không hiển thị thông báo lỗi cho một địa chỉ email hợp lệ.
Đầu vào văn bản không hợp lệ có lỗi
Hình 2. Một trường nhập dữ liệu hiển thị thông báo lỗi khi người dùng nhập địa chỉ email không hợp lệ.

Khả năng tương thích giữa các phiên bản

Việc triển khai này yêu cầu bạn đặt minSDK của dự án thành cấp độ API 21 trở lên.

Phần phụ thuộc

Xác thực dữ liệu đầu vào khi người dùng nhập

Sử dụng mã sau để hiển thị nội dung nhập của trường và xác thực văn bản trong khi người dùng nhập. Nếu thông tin không được xác thực, thông báo lỗi sẽ giúp người dùng sửa thông tin đầu vào.

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

Các điểm chính về mã

  • Xác định một thành phần kết hợp sử dụng lại thành phần OutlinedTextField, thêm các tham số bắt buộc để hiển thị thông báo lỗi của trình xác thực khi người dùng nhập.
  • EmailViewModel được dùng để duy trì trạng thái và cung cấp logic xác thực email.
  • nếu isError là true, giao diện người dùng sẽ cung cấp một chỉ báo trực quan về trạng thái lỗi xác thực.
  • Thành phần này sẽ hiển thị thông báo "Định dạng email không chính xác" cho đến khi bạn nhập một email hoàn chỉnh và chính xác.

Bộ sưu tập chứa hướng dẫn này

Hướng dẫn này là một phần của bộ sưu tập Hướng dẫn nhanh được tuyển chọn, bao gồm các mục tiêu phát triển Android rộng hơn:

Văn bản là phần chính của mọi giao diện người dùng. Tìm hiểu các cách trình bày văn bản trong ứng dụng để mang lại trải nghiệm thú vị cho người dùng.
Tìm hiểu cách triển khai các phương thức để người dùng tương tác với ứng dụng của bạn bằng cách nhập văn bản và sử dụng các phương thức nhập khác.

Bạn có câu hỏi hoặc ý kiến phản hồi

Truy cập vào trang câu hỏi thường gặp của chúng tôi để tìm hiểu về các hướng dẫn nhanh hoặc liên hệ với chúng tôi để chia sẻ ý kiến của bạn.