完成一组文本字段后启用按钮

Question

我想在且仅当使用 RegExp 填充并验证一组文本字段时启用一个按钮。如果你想在网络注册表格中，我需要在 QML 应用程序中有相同的行为。当然，我知道可以使用 JS 代码，但我的目标不是使用它，而是以优雅的方式执行此操作，仅使用声明性 qml 代码。有什么想法吗？

这是一个例子：

Label {
    text: qsTr('First name')
}

TextField {
    id: firstNameTextField
}

Label {
    text: qsTr('Last name')
}

TextField {
    id: lastNameTextField
}

Label {
    text: qsTr('email')
}

// Username
TextField {
    id: emailTextField
    placeholderText: qsTr("Enter email")
    smooth: true
    validator: RegExpValidator{ regExp: /^[-a-z0-9~!$%^&*_=+}{\'?]+(\.[-a-z0-9~!$%^&*_=+}{\'?]+)*@([a-z0-9_][-a-z0-9_]*(\.[-a-z0-9_]+)*\.(aero|arpa|biz|com|coop|edu|gov|info|int|mil|museum|name|net|org|pro|travel|mobi|[a-z][a-z])|([0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}))(:[0-9]{1,5})?$/i }
}

Label {
    text: qsTr('Password')
}

TextField {
    id: passwordTextField
}

Label {
    text: qsTr('Re-Password')
}

TextField {
    id: rePasswordTextField
}
Button {
    id:button
    enabled: // all text fields completed and validated
}

Answer 1

这是一种简单而肮脏的方法。
使用布尔属性作为启用按钮的中间值，如下所示

Item{
property bool isNameFieldValid : false
property bool isAgeFieldValid : false

TextField {
    id: name
    placeholderText: qsTr("Enter name")
    validator:  RegExpValidator{regExp:"valid JS regEx"}
    onAccepted:isNameFieldValid=true
 }
TextField {
    id: age
    placeholderText: qsTr("Enter name")
    validator:  RegExpValidator{regExp:/[0-9A-F]+/}
    onAccepted:isAgeFieldValid=true
 }
Button{
 id:confirmButton
  enable:isNameFieldValid && isAgeFieldValid
 }
}

但唯一的问题是，只有当用户在 Keyboard/keypad 上单击 Enter 键时，字段才会生效。

Answer 2

这是以声明方式编码的相同解决方案：

Row {
    TextField {
        id: field1
        placeholderText: qsTr("Enter number 1")
        validator: IntValidator {bottom: 1; top: 9;}
    }
    TextField {
        id: field2
        placeholderText: qsTr("Enter number 2")
        validator: IntValidator {bottom: 11; top: 19;}
    }
    Button {
        id: btn
        text: "Send"
        enabled: field1.acceptableInput && field2.acceptableInput
    }
}

来自Qt docs：

acceptableInput - Returns true if the text field contains acceptable text. If a validator or input mask was set, this property will return true if the current text satisfies the validator or mask as a final string

完成一组文本字段后启用按钮

Enable button when group of textfields are completed

qt

qml

qtquickcontrols

qtquickcontrols2