Match-Passwort und bestätigen Sie das Passwort in der Laufzeit in qm

Question

Ich arbeite in Qml, ich habe ein Textfeld für Passwort und ein Textfeld für die Bestätigung Passwort, während Benutzer eingeben Passwort bestätigen, sollten die Zeichen kontinuierlich übereinstimmen und Textfeld Farbe sollte sich ändern, wenn das Passwort übereinstimmt oder fehlschlägt.

Answer 1

Es ist ziemlich einfach. Sie müssen nur die text Eigenschaften von Textfeldern überprüfen.

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

Answer 2

Hier Probe Beispiel

Kennwort bestätigen rot gefärbt ist, bestätigen Passwort, um anzuzeigen, ist nicht das eingegebene Passwort passende

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