UITextField Validation visual feedback

2020-07-06 08:34发布

问题:

i have a uiTextField that i am validating input on, when i have invalid input what are some appropriate ways to show that the input is invalid? is there any built in mechanism for showing invalid input states?

回答1:

It's pretty easy to add an 'warning' image to the left-hand side of a UITextField to indicate that the field needs a value.

Try this:

UITextField* field = .... your text field ...

if ( fails_validation ) {
  field.leftViewMode = UITextFieldViewModeAlways;
  UIImageView* imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 32, 32)];
  imageView.image = [UIImage imageNamed:@"warning.png"];
  imageView.contentMode = UIViewContentModeScaleAspectFit;
  field.leftView = imageView;
} else {
  field.leftViewMode = UITextFieldViewModeNever;
  field.leftView = nil;
}


回答2:

The best two options I've found so far are TextFieldValidator and US2FormValidator. With the caveat that I have only used the former, here's my take on each.

TextFieldValidator

  • ↑ Simple (just one class!)
  • ↑ Offers default UI with additional customization possible
  • ↑ Handles multiple validations on a single field
  • ↓ Doesn't handle text views
  • ↓ Slightly awkward name…ValidatedTextField, for example, would be more accurate :)

US2FormValidator

  • ↑ Handles text fields and text views
  • ↑ Importable as a framework, including CocoaPods support
  • ↑ Handles multiple validations on a single field
  • ↓ No default UI

If you just need something implemented quickly, TextFieldValidator may be all you need. If you must have validated UITextViews, US2FormValidator is the way to go.



回答3:

Have a look at Managing Overlay Views section in UITextField docs



回答4:

Put a check mark to the right of the UITextField when correct, Else put an X to the right of it. to make it look smooth: fade it using an animation