代码之家 › 专栏 › 技术社区 › Kaleab Woldemariam

如何在jetpackcompose中验证密码和确认密码字段?

android-jetpack-compose validation kotlin

Kaleab Woldemariam · 技术社区 · 2 年前

如何在两个字段中验证用户输入 password 和 confirmPassword 在喷气背包组成。我试过 var matchError 但当密码不匹配时,它不会显示错误。我该怎么解决这个问题?此外,我如何从中引用密码字段 ConfirmPasswordTextFieldComponent 作用当用户键入 confirmPassword 字段。

@Composable
fun ConfirmPasswordTextFieldComponent(
    text: String,
    labelValue: String,
    confirmText:String, painterResource: Painter,
    onTextChanged: (String) -> Unit,
    hasError: Boolean = false,
    ) {

    val localFocusManager = LocalFocusManager.current
    val password = remember {
        mutableStateOf("")
    }

    val passwordVisible = remember {
        mutableStateOf(false)
    }
    val matchError = remember { mutableStateOf(false) }

    OutlinedTextField(
        modifier = Modifier
            .fillMaxWidth()
            .clip(componentShapes.small),
        label = { Text(text = labelValue) },
        colors = TextFieldDefaults.outlinedTextFieldColors(
            focusedBorderColor = Primary,
            focusedLabelColor = Primary,
            cursorColor = Primary,
            backgroundColor = BgColor
        ),
        keyboardOptions = KeyboardOptions(
            keyboardType = KeyboardType.Password,
            imeAction = ImeAction.Done
        ),
        singleLine = true,
        keyboardActions = KeyboardActions {
            localFocusManager.clearFocus()
        },
        maxLines = 1,
        value = password.value,
        onValueChange = {
            password.value = it
            onTextChanged(it)
        },
        leadingIcon = {
            Icon(painter = painterResource, contentDescription = "")
        },
        trailingIcon = {

            val iconImage = if (passwordVisible.value) {
                Icons.Filled.Visibility
            } else {
                Icons.Filled.VisibilityOff
            }

            val description = if (passwordVisible.value) {
                stringResource(id = R.string.hide_password)
            } else {
                stringResource(id = R.string.show_password)
            }

            IconButton(onClick = { passwordVisible.value = !passwordVisible.value }) {
                Icon(imageVector = iconImage, contentDescription = description)
            }

        },
        isError = hasError || matchError.value,
        visualTransformation = if (passwordVisible.value) VisualTransformation.None else PasswordVisualTransformation(),

    )
    Spacer(modifier = Modifier.height(8.dp))
    if (confirmText != text) {
        Text(
            text = stringResource(id = R.string.error_password_no_match),
            color = colorResource(id = R.color.colorSoftRed300),
            fontSize = 10.sp,
            fontWeight = FontWeight.Bold,
            modifier = Modifier.semantics { contentDescription = "ConfirmPasswordMessage" },
        )
        matchError.value = true
    } else {
        matchError.value = false
    }
}

密码文本字段组件:

@Composable
fun PasswordTextFieldComponent(
    labelValue: String, painterResource: Painter,
    onTextSelected: (String) -> Unit,
    errorStatus: Boolean = false
) {

    val localFocusManager = LocalFocusManager.current
    val password = remember {
        mutableStateOf("")
    }

    val passwordVisible = remember {
        mutableStateOf(false)
    }

    OutlinedTextField(
        modifier = Modifier
            .fillMaxWidth()
            .clip(componentShapes.small),
        label = { Text(text = labelValue) },
        colors = TextFieldDefaults.outlinedTextFieldColors(
            focusedBorderColor = Primary,
            focusedLabelColor = Primary,
            cursorColor = Primary,
            backgroundColor = BgColor
        ),
        keyboardOptions = KeyboardOptions(
            keyboardType = KeyboardType.Password,
            imeAction = ImeAction.Done
        ),
        singleLine = true,
        keyboardActions = KeyboardActions {
            localFocusManager.clearFocus()
        },
        maxLines = 1,
        value = password.value,
        onValueChange = {
            password.value = it
            onTextSelected(it)
        },
        leadingIcon = {
            Icon(painter = painterResource, contentDescription = "")
        },
        trailingIcon = {

            val iconImage = if (passwordVisible.value) {
                Icons.Filled.Visibility
            } else {
                Icons.Filled.VisibilityOff
            }

            val description = if (passwordVisible.value) {
                stringResource(id = R.string.hide_password)
            } else {
                stringResource(id = R.string.show_password)
            }

            IconButton(onClick = { passwordVisible.value = !passwordVisible.value }) {
                Icon(imageVector = iconImage, contentDescription = description)
            }

        },
        visualTransformation = if (passwordVisible.value) VisualTransformation.None else PasswordVisualTransformation(),
        isError = !errorStatus
    )
}

1 回复 | 直到 2 年前

Abhimanyu 2 年前

验证的简化示例。我们可以使用 derivedState 对于这个用例。

@Composable
fun PasswordValidationSample() {
    var password by remember {
        mutableStateOf("")
    }
    var confirmPassword by remember {
        mutableStateOf("")
    }
    val isNotMatching = remember {
        derivedStateOf {
            password != confirmPassword
        }
    }
    Column(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Top,
    ) {
        OutlinedTextField(value = password, onValueChange = { password = it })
        OutlinedTextField(value = confirmPassword, onValueChange = { confirmPassword = it })
        if (isNotMatching.value) {
            Text(text = "Passwords not matching")
        }
    }
}