Question

我在qml工作，我有一个密码文本框和一个确认密码的文本框，当用户输入确认密码时，如果密码匹配或失败，字符应该连续匹配，文本框颜色应该改变。

Answer 1

以下是示例

确认密码为红色，表示确认密码与输入的密码不匹配

Text {
    id: enterpassword
    text: "Enter Password"
}

Rectangle {
    id: rectpassword
    width: 300
    height: 50
    anchors.top: enterpassword.bottom
    anchors.topMargin: 10
    border.width: 1
    border.color: "#c0c0c0"
    TextInput {
        id: password
        anchors.fill: parent
        echoMode: TextInput.Password
    }
}

Text {
    id: confirmtext
    anchors.top: rectpassword.bottom
    anchors.topMargin: 10
    text: "Confirm Password"
}

Rectangle {
    id: confirmpassword
    width: 300
    height: 50
    anchors.top: confirmtext.bottom
    anchors.topMargin: 10
    border.width: 1
    border.color: confirmPassword.text === password.text ? "#c0c0c0" :"red"

    TextInput {
        id: confirmPassword
        anchors.fill: parent
        echoMode: TextInput.Password
    }
}

Answer 2

这很简单。您只需检查文本字段的text属性。

import QtQuick 2.7
import QtQuick.Controls 1.4

Grid {
    id: rtfm

    columns: 2
    rows: 3
    spacing: 5

    // Password stuff
    Label {
        id: password_label
        text: qsTr("Password")
    }

    TextField {
        id: password_field
        placeholderText: qsTr("Write your password")
        echoMode: TextInput.Password
    }

    // Confirm password stuff
    Label {
        id: confirm_password_label
        text: qsTr("Confirm password")
    }

    TextField {
        id: confirm_field
        placeholderText: qsTr("Confirm the password")
        echoMode: TextInput.Password

        // Called each time the user types in the confirm password text field.
        onTextChanged: {
            // Checks whether the password and its confirmation are the same.
            if (password_field.text === confirm_field.text) {
                text_color_box.text = qsTr("Password and confirm password match.");
                text_color_box.color = "#00ff00";
            }
            else {
                text_color_box.text = qsTr("Password and confirm password do not match.");
                text_color_box.color = "#ff0000";
            }
        }
    }

    // Your text color box
    Text {
        id: text_color_box
        text: qsTr("Let's match password and confirm password.")
    }
}

在qml中运行时匹配密码和确认密码

2 个答案: