qml에서 런타임에 암호를 확인하고 암호를 확인하십시오.

Question

qml에서 작업 중입니다. 암호를 입력하라는 텍스트 상자와 암호를 확인하기위한 텍스트 상자가 있습니다. 사용자가 암호를 확인하는 동안 문자는 계속 일치해야하며 텍스트 상자 색 암호가 일치하거나 실패 할 경우 변경해야합니다.

Answer 1

매우 간단합니다. 텍스트 필드의 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.") 
    } 
} 

Answer 2

는 확인 암호가 입력 한 암호

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