SwiftUI 如何验证表单数据,验证通过后提交?

SwiftUI 提供了一些用于表单数据验证的基本功能。

一、使用 @State 属性包装每个表单字段并为其设置初始值，同时使用 @Binding 将其传递给表单视图。

二、在表单中使用验证函数来验证数据。例如，使用 if-else 语句验证文本字段是否为空，并使用 alert() 视图在验证失败时显示消息。

三、创建提交按钮，并在按钮点击时调用提交函数。提交函数将先进行表单数据验证，如果验证通过，则提交表单数据。如果验证失败，则显示验证消息。

示例代码如下：

struct ContentView: View {
    @State private var name = ""
    @State private var age = ""
    @State private var isNameValid = false
    @State private var isAgeValid = false
    @State private var showAlert = false
    
    var body: some View {
        Form {
            Section(header: Text("Personal Info")) {
                TextField("Name", text: $name)
                    .onChange(of: name) { newValue in
                        if !newValue.isEmpty {
                            self.isNameValid = true
                        } else {
                            self.isNameValid = false
                        }
                    }
                    .foregroundColor(isNameValid ? .black : .red)
                
                TextField("Age", text: $age)
                    .keyboardType(.numberPad)
                    .onChange(of: age) { newValue in
                        if let age = Int(newValue), age > 0 && age < 120 {
                            self.isAgeValid = true
                        } else {
                            self.isAgeValid = false
                        }
                    }
                    .foregroundColor(isAgeValid ? .black : .red)
            }
            
            Section {
                Button("Submit") {
                    if isNameValid && isAgeValid {
                        submitForm()
                    } else {
                        showAlert = true
                    }
                }
            }
        }
        .alert(isPresented: $showAlert) {
            Alert(title: Text("Validation Error"), message: Text("Please enter valid name and age"), dismissButton: .default(Text("OK")))
        }
    }
    
    func submitForm() {
        // Submit form data here
    }
}

在上述代码中，我们使用 @State 属性包装了 name 和 age 字段，并为其设置了默认值。我们还使用 @Binding 将这些值传递给 TextField 视图。

然后，我们使用 onChange() 函数来验证输入数据，并使用 isNameValid 和 isAgeValid 属性跟踪其验证状态。如果验证未通过，则相应的文本字段将显示红色。

最后，我们创建了一个提交按钮，并在按钮点击时调用 submitForm() 函数。如果表单验证通过，则提交表单数据。如果验证失败，则显示 alert() 视图，并显示错误消息。

请注意，这仅是一个简单的示例，您还可以创建更复杂的验证逻辑，以适应您的应用程序需求。