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