61ed6999caafe9c41a5ab75d7542db32
SwiftUI 高级组件之Form 文本框内容验证 支持邮件和密码验证

实战需求

SwiftUI 高级组件之Form 文本框内容验证 支持邮件和密码验证

本文价值与收获

看完本文后,您将能够作出下面的界面

SwiftUI 高级组件之Form 文本框内容验证 支持邮件和密码验证

SwiftUI 高级组件之Form 文本框内容验证 支持邮件和密码验证

SwiftUI 高级组件之Form 文本框内容验证 支持邮件和密码验证

SwiftUI 高级组件之Form 文本框内容验证 支持邮件和密码验证

看完本文您将掌握的技能

1、支持form组件
2、支持验证邮箱是否正确
3、验证密码是否填入
4、所有文本框正确后才显示提交按钮


实战代码

1、 主界面
```
import SwiftUI
import Combine

class DataItem: ObservableObject { // observable object

@Published var username:String = "" // observable property
@Published var password:String = "" // observable property

}

struct FormWithValidator : View {

@EnvironmentObject var item:DataItem // data model reference

@State var usernameValid = FieldChecker() // validation state of username field
@State var passwordValid = FieldChecker() // validation state of password field

@State var passwordToggleValid = FieldChecker() // validation state of password field
@State var passwordHidden = true

func username() -> some View {

    TextFieldWithValidator( title: "give me the email",
                            value: $item.username,
                            checker: $usernameValid,
                            onCommit: submit) { v in
                     // validation closure where ‘v’ is the current value

                        if( v.isEmpty ) {
                            return "email cannot be empty"
                        }
                        if( !v.isEmail() ) {
                            return "email is not in correct format"
                        }

                        return nil
                }
                .autocapitalization(.none)
                .padding( usernameValid.padding )
                .overlay( ValidatorMessageInline( message: usernameValid.errorMessageOrNilAtBeginning ),alignment: .bottom)

}

func passwordToggle() -> some View  {

    HStack {
        PasswordToggleField( value:$item.password,
                             checker:$passwordToggleValid,
                             hidden:$passwordHidden ) { v in
                                if( v.isEmpty ) {
                                    return "password cannot be empty"
                                }
                                return nil
        }
        .autocapitalization(.none)
        .padding( passwordToggleValid.padding )
        .overlay( ValidatorMessageInline( message: passwordToggleValid.errorMessageOrNilAtBeginning ),alignment: .bottom)
        Button( action: {
            self.passwordHidden.toggle()
        }) {
            Group {
                if( passwordHidden ) {
                    Image( systemName: "eye.slash")
                }
                else {
                    Image( systemName: "eye")
                }
            }
            .foregroundColor(Color.black)
        }

    }


}

var isValid:Bool {
    passwordToggleValid.valid && usernameValid.valid
}

func submit() {
    if( isValid ) {
        print( "submit:\nusername:\(self.item.username)\npassword:\(self.item.password)")
    }
}

var body: some View {

    NavigationView {
    Form {

        Section(header: Text("Credentials")) {

            username()

            passwordToggle()

        } // end of section

        Section {

            HStack {
                Spacer()
                Button( "Submit" ) {

                    self.submit()
                }
                // enable button only if username and password are validb    
                .disabled( !self.isValid )
                Spacer()
top Created with Sketch.