iOS表单验证功能

第一种实现

实现效果

当输入用户名、密码、邮箱的时候,动态的在textField的右边显示错误信息,并给与颜色警告,一旦输入符合,解除错误信息。一旦三个全部输入符合,注册按钮才可以点击,否则一直disable。

效果图:

form


代码实现

Extension

首先扩展UITextField,在里面实现正则判断。

12345678910111213141516171819202122232425
extension UITextField {    var notEmpty: Bool {        get {            return self.text != ""        }    }

func validate(RegEx: String) -> Bool {        let predicate = NSPredicate(format: "SELF MATCHES %@", RegEx)        return predicate.evaluateWithObject(self.text)    }

func validateEmail() -> Bool {        let regex = "[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\\.[A-Za-z]{2,4}"        return self.validate(regex)    }

func validateUsername() -> Bool {        return self.validate("^[A-Za-z0-9]{6,18}")    }

func validatePassword() -> Bool {        return self.validate("^[A-Za-z0-9]{6,18}")    }}
建立表单Event(Editing Changed)

把三个TextField绑定到一个event事件 -> Editing Changed,在用户编辑的时候,都会进入这个方法,那么我们就在这个方法里面进行验证

formLink

1、viewDidLoad的时候把注册按钮置灰
self.navigationItem.rightBarButtonItem?.enabled = false

2、edit的时候,进入Editing Changed事件

123456789101112131415161718192021222324252627282930
@IBAction func textFieldChanged(sender: UITextBox) {

sender.highlightState = UITextBoxHighlightState.Default        if sender == labelUsername {            if !sender.validateUsername() {                sender.highlightState = UITextBoxHighlightState.Wrong("用户名长度6到18位(数字字母)")            }

} else if sender == labelPassword {            if !sender.validatePassword() {                sender.highlightState = UITextBoxHighlightState.Wrong("密码长度6到18位(数字字母)")            }

} else {            if !sender.validateEmail() {                sender.highlightState = UITextBoxHighlightState.Wrong("邮箱格式不正确")            }        }

if labelUsername.notEmpty && labelPassword.notEmpty && labelEmail.notEmpty {            if labelUsername.validateUsername() && labelPassword.validatePassword() && labelEmail.validateEmail() {                self.navigationItem.rightBarButtonItem?.enabled = true            } else {                self.navigationItem.rightBarButtonItem?.enabled = false            }        } else {            self.navigationItem.rightBarButtonItem?.enabled = false        }

}

这里的UITextBox是我引入的一个文件,继承与UITextField,并且文本框的类都实现了它,以用来实现正确错误的高亮提醒效果。


第二种实现

这一种实现方便在于不用把textField控件和代码实现Event关联,而且可以在viewdidLoad的时候绑定好校验规则,错误提示,需要引入第三方库AJWValidator,在控制所有控件都符合输入规则后,可以点击注册按钮,这里我们用了Swift2.0的新特性(选项集合)来实现。
想了解Option Sets的可以去Swfit 2.0之选项集合(Option Sets)学习一下,这里就不进行讲解了。

首先,定义一个Inputs的选项集合类,定义了所有需要进行校验的textField,代码如下:

12345678910111213141516171819202122232425262728293031
import Foundation

struct Inputs: OptionSetType {    var rawValue: Int

static let user = Inputs(rawValue: 1 << 0)    static let pass = Inputs(rawValue: 1 << 1)    static let mail = Inputs(rawValue: 1 << 2)}

//extend bool validateextension Inputs: BooleanType {    var boolValue: Bool {        return self.rawValue == 0b111    }}

//checkextension Inputs {

func isAllOk() -> Bool {

let count = 3        var found = 0

for time in 0..<count where self.contains(Inputs(rawValue: 1 << time)) {            found++        }        return count == found    }}

在注册的controller里定义一个空的Option Sets集合变量

var inputs: Inputs = []

在viewDidLoad中进行校验,我把校验单独写在了一个方法中:

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
/**     form 表单校验     */    func textFieldValid() {        let barButtonItem = self.navigationItem.rightBarButtonItem        let vali = AJWValidator(type: .String)        vali.addValidationToEnsureRangeWithMinimum(6, maximum: 18, invalidMessage: "用户名长度6到18位(数字字母)")        self.labelUsername.ajw_attachValidator(vali)        vali.validatorStateChangedHandler = { (newState: AJWValidatorState) -> Void in            switch newState {            case .ValidationStateValid:                self.labelUsername.highlightState = .Default                self.inputs.unionInPlace(Inputs.user)            case .ValidationStateInvalid:                let errorMsg = vali.errorMessages.first as? String                self.labelUsername.highlightState = .Wrong(errorMsg!)                self.inputs.subtractInPlace(Inputs.user)            default:                break            }            barButtonItem!.enabled = self.inputs.isAllOk()        }

let passVali = AJWValidator(type: .String)        passVali.addValidationToEnsureRangeWithMinimum(6, maximum: 18, invalidMessage: "密码长度6到18位(数字字母)")        self.labelPassword.ajw_attachValidator(passVali)        passVali.validatorStateChangedHandler = { (newState: AJWValidatorState) -> Void in            switch newState {            case .ValidationStateValid:                self.labelPassword.highlightState = .Default                self.inputs.unionInPlace(Inputs.pass)            case .ValidationStateInvalid:                let errorMsg = passVali.errorMessages.first as? String                self.labelPassword.highlightState = .Wrong(errorMsg!)                self.inputs.subtractInPlace(Inputs.pass)            default:                break            }            barButtonItem!.enabled = self.inputs.isAllOk()        }

let emailVali = AJWValidator(type: .String)        emailVali.addValidationToEnsureValidEmailWithInvalidMessage("格式不正确")        self.labelEmail.ajw_attachValidator(emailVali)        emailVali.validatorStateChangedHandler = { (newState: AJWValidatorState) -> Void in            switch newState {            case .ValidationStateValid:                self.labelEmail.highlightState = .Default                self.inputs.unionInPlace(Inputs.mail)            case .ValidationStateInvalid:                let errorMsg = emailVali.errorMessages.first as? String                self.labelEmail.highlightState = .Wrong(errorMsg!)                self.inputs.subtractInPlace(Inputs.mail)            default:                break            }            barButtonItem!.enabled = self.inputs.isAllOk()        }    }

这样也可以实现实时校验的效果。

时间: 2025-01-20 10:05:56

iOS表单验证功能的相关文章

JS实现表单验证功能(验证手机号是否存在,验证码倒计时)_javascript技巧

废话不多说直接上代码 html代码: <form method="post" id="form_hroizon" enctype="multipart/form-data" action="/"> <input type="hidden" name="phoneTemplet" id="phoneTemplet"> <input type

jQuery表单验证功能实例_jquery

本文实例讲述了jQuery表单验证功能.分享给大家供大家参考.具体如下: 这里使用jquery实现的表单验证效果,以Ajax方式验证你的表单是否填写正确,如果验证不通过,会将表单元素背景变成红色,并给出提示信息,简单实用,jquery表单验证功能已经有很多了,本款表单验证特效看上去更简单,不懂Ajax的朋友,或许直接套用即可实现无刷新表单验证功能. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-table-form-check-c

使用JQuery实现智能表单验证功能_jquery

先给大家展示下表单效果图,具体效果如下所示: 1.前台一开始用JQuery实现,先来上HTML标记: <body> <form id="form1" runat="server"> <table class="tble"> <tr><td class="td1">用户名 <input type="text" class="td&qu

AngularJS中实现用户访问的身份认证和表单验证功能_AngularJS

身份验证权限的设计中比较常见的就是RBAC基于角色的访问控制,基本思想是,对系统操作的各种权限不是直接授予具体的用户,而是在用户集合与权限集合之间建立一个角色集合.每一种角色对应一组相应的权限.     一旦用户被分配了适当的角色后,该用户就拥有此角色的所有操作权限.这样做的好处是,不必在每次创建用户时都进行分配权限的操作,只要分配用户相应的角色即可,而且角色的权限变更比用户的权限变更要少得多,这样将简化用户的权限管理,减少系统的开销. 在Angular构建的单页面应用中,要实现这样的架构我们需

jquery 实现表单验证功能代码(简洁)_jquery

1. 页面效果,自动提示验证信息... 2. 页面代码 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>表单验证页面</title> <link href="../Scripts/themes/default/easyui.css" rel="stylesheet" type="text/css

joomla内置的表单验证功能使用方法_php技巧

以下说一下使用方法: 在要使用表单功能的页面的最上面输入如下代码 JHTML::_('behavior.formvalidation'); 然后把如下脚本加入页面上 复制代码 代码如下: <script type="text/javascript"> function formValidate(f) { if (document.formvalidator.isValid(f)) { f.check.value='<?php echo JUtility::getTok

FormValidate 表单验证功能代码更新并提供下载_javascript技巧

FormValidate 功能更新 下载: http://xiazai.jb51.net/jslib/FormValidate.rar 更多用法,可参才: http://jobj.googlecode.com/svn/trunk/FormValidate/demo.html 加入方法: extend, 加入验证模式 4,同3,但是当验证不通过时,立即停止向下检查.在模式3下,如果发生错误,会把错误记录,并向下检查,模式4就不向下检查了. 用法: <input type="text"

功能强大的jquery.validate表单验证插件_jquery

本文实例为大家分享了jquery.validate表单验证的使用方法,供大家参考,具体内容如下 1 .表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助提示   2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮助提醒 对于初学者而言,html表单验证是一项极其琐碎的事情.要做好表单验证,需要准备以下基本要素: 1).html表单结构:包含需要校验的表单元素: 2).js逻辑控制:在需要校验的表单元素上绑定事件,如点

jquery validate表单验证插件_jquery

对于初学者而言,html表单验证是一项极其琐碎的事情.要做好表单验证,需要准备以下基本要素: 1.html表单结构:包含需要校验的表单元素: 2.js逻辑控制:在需要校验的表单元素上绑定事件,如点击.获取焦点.失去焦点等事件,并设置这些事件对应的执行函数: 3.css样式设置:针对需要校验的表单元素,需要设置默认的初始样式,以及触发元素绑定事件后的变化样式. 这3类基本要素中,html表单结构的创建相对简单.表单验证的重点和难点在于如何利用js及时有效地提醒用户有关表单操作的信息.这里我参考了百