如何在SwiftUI中实现邮箱验证？附TextField示例代码

我来帮你搞定SwiftUI里的邮箱验证，结合你给出的TextField代码，咱们可以从定义验证规则、实时反馈到提交校验这几个环节来实现：

1. 定义邮箱格式验证规则 #

首先我们可以给String添加一个扩展，用正则表达式来判断字符串是否符合邮箱格式：

extension String {
    var isValidEmail: Bool {
        // 这个正则表达式覆盖了大部分常见的邮箱格式规范
        let emailRegEx = "[A-Z0-9a-z._%+-]+@[A-Za-z0-9.-]+\\.[A-Za-z]{2,64}"
        let emailPredicate = NSPredicate(format:"SELF MATCHES %@", emailRegEx)
        return emailPredicate.evaluate(with: self)
    }
}

2. 给你的TextField添加实时验证反馈 #

我们可以通过@State变量来跟踪验证状态，并且在用户输入时实时更新，同时用UI变化（比如背景色）来提示用户：

struct EmailView: View {
    @State private var email = ""
    @State private var isEmailValid = true // 跟踪邮箱是否有效

    var body: some View {
        VStack {
            TextField("Please enter your e-mail", text: $email)
                .modifier(ClearButton(text: $email))
                .font(.headline)
                .padding(10)
                .foregroundColor(.black)
                // 验证失败时背景变成浅红色，提示用户格式错误
                .background(isEmailValid ? Color.white : Color.red.opacity(0.2))
                .frame(width: 300, height: 40, alignment: .center)
                .cornerRadius(20)
                // 监听输入变化，实时验证
                .onChange(of: email) { newValue in
                    isEmailValid = newValue.isValidEmail
                }

            // 也可以添加文本提示
            if !isEmailValid {
                Text("请输入有效的邮箱地址")
                    .foregroundColor(.red)
                    .font(.caption)
                    .padding(.top, 5)
            }
        }
    }
}

3. 提交时的最终验证 #

如果是在用户点击提交按钮时再做最终验证，可以结合弹窗提示来增强用户体验：

struct EmailView: View {
    @State private var email = ""
    @State private var isEmailValid = true
    @State private var showErrorAlert = false

    var body: some View {
        VStack {
            // 上面的TextField代码...

            Button("提交") {
                if email.isValidEmail {
                    // 邮箱格式正确，执行后续逻辑（比如发送请求）
                    print("邮箱验证通过，开始提交")
                } else {
                    isEmailValid = false
                    showErrorAlert = true
                }
            }
            .padding(.top, 20)
            .alert(isPresented: $showErrorAlert) {
                Alert(
                    title: Text("格式错误"),
                    message: Text("请检查你的邮箱地址是否正确"),
                    dismissButton: .default(Text("好的"))
                )
            }
        }
    }
}

这样就完成了从实时输入反馈到提交校验的完整邮箱验证流程，你可以根据自己的需求调整UI提示的样式~

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