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

时间:2016-11-22 10:51:10

标签: qt qml qtquickcontrols qtquickcontrols2

我希望在使用RegExp填充和验证一组文本字段时启用一个按钮。如果您认为在Web注册表单中,我需要在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
}

2 个答案:

答案 0 :(得分:3)

以下是以声明方式编码的相同解决方案:

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 - 如果文本字段包含可接受的,则返回true   文本。如果设置了验证器或输入掩码,则此属性将返回   如果当前文本满足验证器或掩码作为最终文本,则返回true   串

答案 1 :(得分:0)

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

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

但唯一的办法是,只有当用户点击键盘/键盘上的Enter键时才会验证字段。