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用户登录输入非空校验经典案例相关推荐

iView Input 输入框表单非空校验，默认值是 Number 类型校验失败
问题描述 iView 按照 Form 组件文档用法写非空校验,当表单数据有默认值并且默认值类型为 Number校验失败,手动输入可以校验成功. 问题原因官方已经给出回答,校验规则默认是 string ...
iframe下的excel导出以及ckeditor的非空校验
这片文章没有任何技术含量,仅仅是记录下来方便以后使用时查询使用iframe导出excel 首先页面上需要有一个隐藏的iframe <iframe id="exportIframe&q ...
java中如何限制输入非空_项目中的参数限制、非空、以及集合中的验证，你真的会做吗（Java）...
背景: 在项目管理中,我们通常要对一个个参数做验证, 前端校验,后端加校验,这里为了保证校验的一致性,我们需要将我们的校验写的比较高效率一点,不至于满篇都是is null的进行参数验证,为了成为一个成 ...
linux中c语言kbhit函数用法,C语言判断用户是否输入-非阻塞函数kbhit
一.基础研究要从地址读取数据,肯定是要定义一个指针变量p,用它来实现变换地址和取值的功能.另外程序是当两个条件中的某一个出现时才停止,所以应该用while~do循环语句循环输出n和d,并用while ...
Yii2.0 用户登录详解（上）
一.准备在开始编写代码之前,我们需要思考一下:用户登陆模块,实现的是什么功能?很明显,是登陆功能,那么,登陆需要用户名和密码,我们在数据库的一张表中就应该准备好用户名和密码的字段,再思考一下,如果要 ...
javascript 校验非空_前端(js+JQuery非空校验)
1.倒退://history.go(-1);//javascript: history.back(); 两种页面跳转的方法: //Response.Write(""); Page. ...
python用户登录(输入用户名和密码)dic_Python使用装饰器模拟用户登陆验证功能示例...
本文实例讲述了Python使用装饰器模拟用户登陆验证功能.分享给大家供大家参考,具体如下: # -*- coding:utf-8 -*- #!python3 user_list = [ {'name' ...
随机验证码、用户登录密码验证、手机号加密案例
String类案例 1.随机数案例 package zrzy.qrs.stringequals;import java.util.Random;/** *需求:获取一个随机5位的验证码,包含字母大小写 ...
微信小程序 --- 表单输入验证（手机号、邮箱验证、输入非空）
js代码 Page({/*** 页面的初始数据*/data: {indicatorDots: false,autoplay: false,interval: 5000,duration: 1000,p ...

SwiftUI3.0用户登录输入非空校验经典案例

SwiftUI3.0用户登录输入非空校验经典案例

SwiftUI3.0用户登录输入非空校验经典案例相关推荐

最新文章

热门文章