面试题：SwiftUI中TextField与TextEditor的输入验证与数据绑定

Question

假设你正在开发一个登录界面，需要对用户名（使用TextField）和用户简介（使用TextEditor）进行输入验证。用户名要求只能包含字母和数字且长度在3到20位之间，用户简介要求字数不超过200字。请使用SwiftUI的状态绑定和验证机制实现该功能，并解释如何处理输入验证失败的情况，例如给出适当的错误提示。

Answer 1

import SwiftUI

struct ContentView: View {
    @State private var username = ""
    @State private var userBio = ""
    @State private var usernameError: String?
    @State private var bioError: String?

    var body: some View {
        VStack {
            TextField("用户名", text: $username)
               .padding()
               .overlay(
                    RoundedRectangle(cornerRadius: 10)
                       .stroke(Color.gray, lineWidth: 1)
                )
               .onChange(of: username) { newValue in
                    validateUsername(newValue)
                }
            if let error = usernameError {
                Text(error)
                   .foregroundColor(.red)
                   .font(.caption)
            }

            TextEditor(text: $userBio)
               .frame(height: 100)
               .padding()
               .overlay(
                    RoundedRectangle(cornerRadius: 10)
                       .stroke(Color.gray, lineWidth: 1)
                )
               .onChange(of: userBio) { newValue in
                    validateBio(newValue)
                }
            if let error = bioError {
                Text(error)
                   .foregroundColor(.red)
                   .font(.caption)
            }

            Button("登录") {
                // 这里可以添加登录逻辑，前提是用户名和简介都验证通过
                if usernameError == nil && bioError == nil {
                    print("登录成功，用户名：\(username)，简介：\(userBio)")
                }
            }
           .padding()
           .background(Color.blue)
           .foregroundColor(.white)
           .cornerRadius(10)
        }
       .padding()
    }

    func validateUsername(_ value: String) {
        let allowedCharacters = CharacterSet.alphanumerics
        if value.isEmpty || value.rangeOfCharacter(from: allowedCharacters.inverted) != nil || value.count < 3 || value.count > 20 {
            usernameError = "用户名只能包含字母和数字，长度在3到20位之间"
        } else {
            usernameError = nil
        }
    }

    func validateBio(_ value: String) {
        if value.count > 200 {
            bioError = "用户简介字数不能超过200字"
        } else {
            bioError = nil
        }
    }
}

输入验证失败情况处理解释

1. 用户名验证失败：
   • 使用@State变量usernameError来存储用户名验证失败的错误信息。
   • 在TextField的onChange闭包中调用validateUsername函数进行验证。
   • 如果验证失败，设置usernameError为相应的错误提示，然后通过条件判断，在界面上显示该错误提示文本。
2. 用户简介验证失败：
   • 使用@State变量bioError来存储用户简介验证失败的错误信息。
   • 在TextEditor的onChange闭包中调用validateBio函数进行验证。
   • 如果验证失败，设置bioError为相应的错误提示，同样通过条件判断，在界面上显示该错误提示文本。
3. 登录按钮处理：
   • 登录按钮的点击事件中，只有当usernameError和bioError都为nil时，即用户名和用户简介都验证通过，才执行登录逻辑（这里简单打印信息表示登录成功）。