Flex: Как вы проверяете 2 поля пароля, чтобы убедиться, что они совпадают?

Question

Я хочу использовать валидатор, чтобы убедиться, что 2 поля пароля совпадают во Flex. Я хочу, чтобы валидатор выделял поля формы, как обычный элемент управления валидации flex. Спасибо.

Answer 1

enter code here Я создал свой собственный валидатор (в основном скопированный из валидатора даты):

package validators
{
    import mx.validators.ValidationResult;
    import mx.validators.Validator;

    public class PasswordValidator extends Validator
    {
        // Define Array for the return value of doValidation().
        private var results:Array;

        public function PasswordValidator()
        {
            super();
        }

        public var confirmationSource: Object;
        public var confirmationProperty: String;

        // Define the doValidation() method.
        override protected function doValidation(value:Object):Array {

            // Call base class doValidation().
            var results:Array = super.doValidation(value.password);

            if (value.password != value.confirmation) {
                results.push(new ValidationResult(true, null, "Mismatch",
                "Password Dosen't match Retype!"));

            }

            return results;
        }       

        /**
         *  @private
         *  Grabs the data for the confirmation password from its different sources
         *  if its there and bundles it to be processed by the doValidation routine.
         */
        override protected function getValueFromSource():Object
        {
            var value:Object = {};

            value.password = super.getValueFromSource();

            if (confirmationSource && confirmationProperty)
            {
                value.confirmation = confirmationSource[confirmationProperty];
            }

            return  value;
        }       

    }
}

пример mxml для использования:

<validators:PasswordValidator id="pwvPasswords" required="true" source="{txtPassword}" property="text" confirmationSource="{txtPasswordConfirm}" confirmationProperty="text" trigger="{btnStep2Finish}" />

Это довольно просто, но это в основном то, что мне нужно. Это только выдвигает на первый план поле пароля, хотело бы, чтобы оно выделило оба.

Answer 2

Вот лучший пользовательский валидатор, более универсальный, чистый и хорошо работающий с полем 'required'.

 import mx.validators.ValidationResult;
 import mx.validators.Validator;

 public class MatchValidator extends Validator{
  private var _matchSource: Object = null;
  private var _matchProperty: String = null;
  private var _noMatchError: String = "Fields did not match";

  [Inspectable(category="General", defaultValue="Fields did not match")]
  public function set noMatchError( argError:String):void{
   _noMatchError = argError;
  }
  public function get noMatchError():String{
   return _noMatchError;
  }

  [Inspectable(category="General", defaultValue="null")]
  public function set matchSource( argObject:Object):void{
   _matchSource = argObject;
  }
  public function get matchSource():Object{
   return _matchSource;
  }

  [Inspectable(category="General", defaultValue="null")]
  public function set matchProperty( argProperty:String):void{
   _matchProperty = argProperty;
  }
  public function get matchProperty():String{
   return _matchProperty;
  }


  override protected function doValidation(value:Object):Array {

   // Call base class doValidation().
   var results:Array = super.doValidation(value.ours);

   var val:String = value.ours ? String(value.ours) : "";
   if (results.length > 0 || ((val.length == 0) && !required)){
    return results;
   }else{
    if(val != value.toMatch){
     results.length = 0;
     results.push( new ValidationResult(true,null,"mismatch",_noMatchError));
     return results;
    }else{
     return results;
    }
   }
  }  

  override protected function getValueFromSource():Object {
   var value:Object = {};

   value.ours = super.getValueFromSource();

   if (_matchSource && _matchProperty){
    value.toMatch = _matchSource[_matchProperty];
   }else{
    value.toMatch = null;
   }
   return value;
  }
 }

Вот пример:

<components:MatchValidator source="{passwordCheckField}" property="text" matchSource="{passwordField}" matchProperty="text"
    valid="passwordsMatch = true" invalid="passwordsMatch = false" noMatchError="Passwords do not match"/>

Answer 3

Я сделал это по-другому, используя пользовательские правила проверки.

Проверьте это: http://martypitt.wordpress.com/2009/08/26/rule-based-asynchronous-validation-in-flex-forms/

В нем показано, как выполнить асинхронную проверку (например, проверить, доступно ли имя пользователя на сервере) и другие сценарии проверки, которые не вписываются в готовую среду flex, включая сопоставление двух паролей.

Например:

<mx:Button label="Register" enabled="{ validationRules.isValid }" />
<validation:ValidationRuleCollection id="validationRules">
      <validation:UsernameIsUniqueValidationRule username="{ txtUsername.text }" targetComponent="{ txtUsername }" />
      <validation:EmailIsUniqueValidationRule email="{ txtEmailAddress.text }" targetComponent="{ txtEmailAddress }" />
      <validation:PasswordsMustMatchValidationRule password1="{ txtPassword.text }" password2="{ txtPasswordConfirm.text }" targetComponent="{ txtPasswordConfirm }" />
      <mx:StringValidator required="true" source="{ txtUsername }" property="text" requiredFieldError="{ ResourceManager.getInstance().getString( ResourceBundles.ERROR_MESSAGES , 'REQUIRED_FIELD_ERROR' )}" />
</validation:ValidationRuleCollection>

Answer 4

Я расширил решение Даниэля, добавив также возможность срабатывания соответствующего источника.

import flash.events.Event;

import mx.validators.ValidationResult;
import mx.validators.Validator;

public class MatchValidator extends Validator
{
    private var _matchSource: Object = null;
    private var _matchProperty: String = null;
    private var _noMatchError: String = "Fields did not match";

    [Inspectable(category="General", defaultValue="Fields did not match")]
    public function set noMatchError( argError:String):void{
        _noMatchError = argError;
    }
    public function get noMatchError():String{
        return _noMatchError;
    }

    [Inspectable(category="General", defaultValue="null")]
    public function set matchSource( argObject:Object):void{
        removeTriggerHandler();
        _matchSource = argObject;
        addTriggerHandler();
    }
    public function get matchSource():Object{
        return _matchSource;
    }

    [Inspectable(category="General", defaultValue="null")]
    public function set matchProperty( argProperty:String):void{
        _matchProperty = argProperty;
    }
    public function get matchProperty():String{
        return _matchProperty;
    }

    override protected function doValidation(value:Object):Array {

        // Call base class doValidation().
        var results:Array = super.doValidation(value.ours);

        var val:String = value.ours ? String(value.ours) : "";
        if (results.length > 0 || ((val.length == 0) && !required)){
            return results;
        }else{
            if(val != value.toMatch){
                results.length = 0;
                results.push( new ValidationResult(true,null,"mismatch",_noMatchError));
                return results;
            }else{
                return results;
            }
        }
    }  

    override protected function getValueFromSource():Object {
        var value:Object = {};

        value.ours = super.getValueFromSource();

        if (_matchSource && _matchProperty){
            value.toMatch = _matchSource[_matchProperty];
        }else{
            value.toMatch = null;
        }
        return value;
    }

    override public function set triggerEvent(value:String):void
    {
        removeTriggerHandler();
        super.triggerEvent = value;
        addTriggerHandler();
    }

    private function addTriggerHandler():void
    {
        if (_matchSource)
            _matchSource.addEventListener(triggerEvent,triggerHandler);
    }

    private function removeTriggerHandler():void
    {
        if (_matchSource)
            _matchSource.removeEventListener(triggerEvent,triggerHandler);
    }

    private function triggerHandler(event:Event):void
    {
        validate();
    }
}

Answer 5

Если у вас нет для использования валидатора, вы можете просто прикрепить обработчик события изменения и установить свойство errorString поля пароля, если пароли не совпадают. Он дает ту же подсветку, что и валидатор.