English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Implementación de instrucciones personalizadas de validación de contraseñas de formulario angularjs

Código HTML

<form name="form">
    <input type="password" name="password" ng-model="password" required placeholder="Por favor, ingrese la contraseña">
    <input type="password" name="passwordConfirm" ng-model="passwordConfirm" equal-to="password" placeholder="Por favor, ingrese la contraseña nuevamente">
    <span ng-show="form.passwordConfirm.$error.equalTo">Las contraseñas no coinciden</span>
  </form>

js

angular.module("Valid",[])
.directive("equalTo", function () {
  return {
    require: "ngModel",
    link: function (scope, ele, attrs, ctrl) {
      console.log(scope);//Imprimir el ámbito actual
      console.log(attrs);//Imprimir la lista de atributos del etiqueta actual
      console.log(ctrl);//Imprimir el ctrl actual
      var target = attrs["equalTo"];//Obtener el valor clave del atributo de instrucción personalizada
      if (target) {//Judgar si la clave existe
        scope.$watch(target, function () {//Existe una escucha de inicio que la monitorea
          ctrl.$validate()//Llamar manualmente a la validación cada vez que se cambia
        ) 
        // Obtener el controlador padre FormController del controlador de modelo actual
        var targetCtrl = ctrl.$$parentForm[target];//Obtener el controlador de modelo especificado
        console.log(targetCtrl)
        ctrl.$validators.equalTo = function (modelValue, viewVale) {//Contenido del validador personalizado
          var targetValue = targetCtrl.$viewValue;//Obtener el valor de entrada de la contraseña
          retorno targetValue == viewVale;//¿es igual al valor de passwordConfirm?
        }
        ctrl.$formatters.push(function (value) {
          console.log("Valor en proceso de formateo de datos:", value)
          valor de retorno;
        )
        ctrl.$parsers.push(function (value) {
          console.log("Valor en proceso de conversión de datos:", value)
          valor de retorno;
        )
      }
    }
  }
)

Dirección de demostración:https://tianyouh.github.io/angularPasswordConfirm/

Te gustará