SwiftUI3.0用戶登錄輸入非空校驗經典案例

在oc和swift里面，通過UITextFiled的代理方法，可以實施監聽到用戶輸入的每個字符，使用正則表達式，進行判斷，是否合法。在swiftUI通過
Published 發行者， ObservableObject 觀察對象，實現監聽綁定 TextField的輸入值的變化，結合最新的Combine框架。寫一個函數。
先看UI布局核心源碼:

// // ContentView.swift // SwiftUILoginDemo // // Created by lujun on 2022/1/30. //import SwiftUIstruct ContentView: View {@StateObject var loginVM = LoginViewModel()var body: some View {VStack{VStack(alignment: .leading, spacing: 4){ZStack{RoundedRectangle(cornerRadius: 10).fill(Color.black.opacity(0.14))RoundedRectangle(cornerRadius: 10).stroke(Color.blue,lineWidth: 1).opacity(loginVM.userNameFaildFoucs == true ? 1 : 0)TextField("請輸入用戶名",text: $loginVM.userName,onEditingChanged: { editChange inwithAnimation {loginVM.userNameFaildFoucs = editChange}}).padding(.horizontal,20)}.frame( height: 35)Text(loginVM.vatiryUserNameError ?? "").font(.system(size: 12, weight: .semibold)).foregroundColor(.red).padding(.leading,20)}VStack(alignment: .leading, spacing: 4){ZStack{RoundedRectangle(cornerRadius: 10).fill(Color.black.opacity(0.14))RoundedRectangle(cornerRadius: 10).stroke(Color.blue,lineWidth: 1).opacity(loginVM.userNameFaildFoucs == false ? 1 : 0)SecureField("請輸入密碼",text: $loginVM.password).padding(.horizontal,20)}.frame( height: 35)Text(loginVM.vatiryPasswordError ?? "").font(.system(size: 12, weight: .semibold)).foregroundColor(.red).padding(.leading,20)}Button {debugPrint("登錄")debugPrint(loginVM.userName)debugPrint(loginVM.password)} label: {Text("登錄").foregroundColor(.white).padding(.vertical,4).padding(.horizontal,40).background(Capsule().fill(Color.blue.opacity(loginVM.isVatity ? 1 : 0.3)))}.disabled(!loginVM.isVatity)}.padding(.horizontal,16)} } struct ContentView_Previews: PreviewProvider {static var previews: some View {ContentView()} }

邏輯代碼

// // LoginViewModel.swift // SwiftUILoginDemo // // Created by lujun on 2022/1/30. //import SwiftUI import Combine class LoginViewModel: ObservableObject{@Published var userNameFaildFoucs: Bool?@Published var isVatity = false@Published var userName = ""@Published var vatiryUserNameError: String?@Published var password = ""@Published var vatiryPasswordError: String?private var callelabelSet: Set<AnyCancellable> = []private var verityUserNamePublisher: AnyPublisher<String?,Never> {$userName.debounce(for: 0.5, scheduler: RunLoop.main).removeDuplicates().map{ _userName inif _userName.isEmpty {return "用戶名不能為空"}else if _userName.count < 4 || _userName.count > 16 {return "用戶名介于4～16之間"}else{return nil}}.eraseToAnyPublisher()}private var veritypasswordPublisher: AnyPublisher<String?,Never> {$password.debounce(for: 0.5, scheduler: RunLoop.main).removeDuplicates().map{ _userName inif _userName.isEmpty {return "密碼不能為空"}else if _userName.count < 4 || _userName.count > 16 {return "密碼介于4～16之間"}else{return nil}}.eraseToAnyPublisher()}init(){Publishers.CombineLatest(verityUserNamePublisher, veritypasswordPublisher).dropFirst().sink { _vatiryPasswordError,_vatiryUserNameError inself.isVatity = _vatiryPasswordError == nil && _vatiryUserNameError == nil}.store(in: &callelabelSet)verityUserNamePublisher.dropFirst().sink { _vatiryUserNameError inself.vatiryUserNameError = _vatiryUserNameError}.store(in: &callelabelSet)veritypasswordPublisher.dropFirst().sink { _vatiryPasswordError inself.vatiryPasswordError = _vatiryPasswordError}.store(in: &callelabelSet)} }

如果對Combine不熟悉的話，看起來 比較difficult

總結

以上是生活随笔為你收集整理的SwiftUI3.0用户登录输入非空校验经典案例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。