SwiftUI+Combine表单提交验证：点击按钮触发空字段错误提示

核心思路 #

放弃用dropFirst()控制初始状态，转而通过按钮点击触发信号主动启动验证逻辑。既保证页面初始加载时无错误提示，又能在用户点击提交按钮时，强制检查所有字段的合法性。

具体实现步骤 #

1. 构建表单ViewModel #

创建带验证逻辑的ViewModel，加入提交触发信号，将字段发布者与触发信号合并，实现点击按钮时强制验证所有字段：

import SwiftUI
import Combine

class FormViewModel: ObservableObject {
    // 表单字段
    @Published var username = ""
    @Published var password = ""
    
    // 错误信息存储
    @Published var usernameError: String?
    @Published var passwordError: String?
    
    // 提交触发信号
    private let submitTrigger = PassthroughSubject<Void, Never>()
    private var cancellables = Set<AnyCancellable>()
    
    init() {
        setupValidation()
    }
    
    private func setupValidation() {
        // 用户名空值验证
        $username
            .combineLatest(submitTrigger)
            .map { username, _ in
                username.isEmpty ? "用户名不能为空" : nil
            }
            .assign(to: \.usernameError, on: self)
            .store(in: &cancellables)
        
        // 密码空值验证
        $password
            .combineLatest(submitTrigger)
            .map { password, _ in
                password.isEmpty ? "密码不能为空" : nil
            }
            .assign(to: \.passwordError, on: self)
            .store(in: &cancellables)
    }
    
    // 提交按钮点击调用方法
    func submit() {
        submitTrigger.send() // 发送触发信号，强制所有字段执行验证
        
        // 无错误时执行提交逻辑
        guard usernameError == nil, passwordError == nil else { return }
        print("表单提交成功")
    }
}

2. SwiftUI 视图实现 #

绑定ViewModel，给字段添加错误状态样式，点击按钮时调用submit()方法触发验证：

struct FormView: View {
    @StateObject private var viewModel = FormViewModel()
    
    var body: some View {
        Form {
            // 用户名输入框
            TextField("用户名", text: $viewModel.username)
                .foregroundColor(viewModel.usernameError != nil ? .red : .primary)
                .autocapitalization(.none)
            
            // 用户名错误提示
            if let error = viewModel.usernameError {
                Text(error)
                    .foregroundColor(.red)
                    .font(.caption)
            }
            
            // 密码输入框
            SecureField("密码", text: $viewModel.password)
                .foregroundColor(viewModel.passwordError != nil ? .red : .primary)
            
            // 密码错误提示
            if let error = viewModel.passwordError {
                Text(error)
                    .foregroundColor(.red)
                    .font(.caption)
            }
            
            // 提交按钮
            Button("提交") {
                viewModel.submit()
            }
            .frame(maxWidth: .infinity)
        }
        .padding()
    }
}

关键说明 #

• 用combineLatest(submitTrigger)替代dropFirst()，只有字段发生变化或点击提交按钮时，才会触发验证逻辑，完美解决初始加载无提示、点击提交全字段校验的需求。
• 如果需要保留输入时的实时验证，可以将combineLatest替换为merge，或者单独添加字段变化的验证流，按需调整即可。

内容的提问来源于stack exchange，提问作者Saurabh Kumar