如何让TextField仅支持合法电子邮箱地址验证？

嘿，你说得对——SwiftUI里设置keyboardType(.emailAddress)和textContentType(.emailAddress)只是帮你优化输入体验（比如调出邮箱键盘、让系统识别这是邮箱输入框），但不会自动做格式验证。要实现错误提示功能，得自己加验证逻辑，我给你一步步来：

1. 先写一个邮箱验证工具函数 #

我们用正则表达式来匹配标准的邮箱格式，你可以根据需求调整正则规则（比如支持更多特殊字符）：

func isValidEmail(_ email: String) -> Bool {
    // 匹配常见邮箱格式的正则，可根据需求修改
    let emailRegex = #"^[A-Z0-9a-z._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$"#
    let emailPredicate = NSPredicate(format:"SELF MATCHES %@", emailRegex)
    return emailPredicate.evaluate(with: email)
}

2. 在View中添加状态变量 #

需要跟踪三个状态：输入的邮箱文本、邮箱是否有效、错误提示内容：

@State private var email = ""
@State private var isEmailValid = true
@State private var errorMessage = ""

3. 给TextField添加验证逻辑 #

你可以选择两种验证时机：实时输入验证，或者提交/失去焦点时验证，两种方式我都给你举例：

方式一：实时输入验证（每输入一个字符就检查） #

用onChange监听邮箱文本变化，实时更新验证状态：

TextField("Your e-mail...", text: $email)
    .keyboardType(.emailAddress)
    .textContentType(.emailAddress)
    .disableAutocorrection(true)
    .autocapitalization(.none)
    .padding()
    .border(.gray)
    .onChange(of: email) { newValue in
        if newValue.isEmpty {
            // 输入为空时可以选择不显示错误
            isEmailValid = true
            errorMessage = ""
        } else if !isValidEmail(newValue) {
            isEmailValid = false
            errorMessage = "请输入有效的邮箱地址（如name@example.com）"
        } else {
            isEmailValid = true
            errorMessage = ""
        }
    }

方式二：失去焦点/提交时验证（更友好的用户体验） #

用FocusState监听输入框焦点，当用户离开输入框时再验证：

// 先添加焦点状态变量
@FocusState private var isEmailFieldFocused: Bool

// 给TextField绑定焦点
TextField("Your e-mail...", text: $email)
    .keyboardType(.emailAddress)
    .textContentType(.emailAddress)
    .disableAutocorrection(true)
    .autocapitalization(.none)
    .padding()
    .border(.gray)
    .focused($isEmailFieldFocused)
    .onChange(of: isEmailFieldFocused) { isFocused in
        // 失去焦点且输入不为空时验证
        if !isFocused && !email.isEmpty {
            isEmailValid = isValidEmail(email)
            errorMessage = isEmailValid ? "" : "邮箱格式不正确，请检查"
        }
    }

4. 显示错误提示 #

在TextField下方添加错误提示文本，只有验证不通过时才显示：

if !isEmailValid {
    Text(errorMessage)
        .foregroundColor(.red)
        .font(.caption)
        .frame(maxWidth: .infinity, alignment: .leading)
        .padding(.horizontal)
}

完整示例代码 #

把以上部分整合起来，就是一个带验证的邮箱输入View：

import SwiftUI

struct EmailValidationView: View {
    @State private var email = ""
    @State private var isEmailValid = true
    @State private var errorMessage = ""
    @FocusState private var isEmailFieldFocused: Bool
    
    func isValidEmail(_ email: String) -> Bool {
        let emailRegex = #"^[A-Z0-9a-z._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$"#
        let emailPredicate = NSPredicate(format:"SELF MATCHES %@", emailRegex)
        return emailPredicate.evaluate(with: email)
    }
    
    var body: some View {
        VStack(spacing: 16) {
            TextField("Your e-mail...", text: $email)
                .keyboardType(.emailAddress)
                .textContentType(.emailAddress)
                .disableAutocorrection(true)
                .autocapitalization(.none)
                .padding()
                .border(.gray)
                .focused($isEmailFieldFocused)
                .onChange(of: isEmailFieldFocused) { isFocused in
                    if !isFocused && !email.isEmpty {
                        isEmailValid = isValidEmail(email)
                        errorMessage = isEmailValid ? "" : "邮箱格式不正确，请检查"
                    }
                }
            
            if !isEmailValid {
                Text(errorMessage)
                    .foregroundColor(.red)
                    .font(.caption)
                    .frame(maxWidth: .infinity, alignment: .leading)
                    .padding(.horizontal)
            }
            
            Button("提交") {
                // 提交前再做一次最终验证
                if isValidEmail(email) {
                    print("邮箱格式正确，执行提交逻辑")
                } else {
                    isEmailValid = false
                    errorMessage = "请先输入有效的邮箱地址"
                }
            }
            .disabled(email.isEmpty || !isEmailValid)
        }
        .padding()
    }
}

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