Implementierung des benutzerdefinierten Anweisungscode für Formularpasswortvalidierung in angularjs

html代码

<form name="form">
    <input type="password" name="password" ng-model="password" required placeholder="请输入密码">
    <input type="password" name="passwordConfirm" ng-model="passwordConfirm" equal-to="password" placeholder="请再次输入密码">
    <span ng-show="form.passwordConfirm.$error.equalTo">两次密码不一致</span>
  </form>

js

angular.module("Valid",[])
.directive("equalTo", function () {
  return {
    require: "ngModel",
    link: function (scope, ele, attrs, ctrl) {
      console.log(scope);//打印当前作用域
      console.log(attrs);//Drucken Sie die aktuelle Liste der Attributenschlüssel aus
      console.log(ctrl);//Drucken Sie den aktuellen ctrl aus
      var target = attrs["equalTo"];//Erhalten Sie die Werte der Attributenschlüssel der benutzerdefinierten Anweisung
      if (target) {//Überprüfen Sie, ob der Schlüssel existiert
        scope.$watch(target, function () {//Existiert eine Startabhörung, die ihren Wert überwacht
          ctrl.$validate()//Jedes Mal, wenn sich etwas ändert, rufen Sie manuell die Validierung auf
        ) 
        // Erhalten Sie den übergeordneten Steuerer FormController des aktuellen Modellsteuerers
        var targetCtrl = ctrl.$$parentForm[target];//Erhalten Sie den angegebenen Modellsteuerer
        console.log(targetCtrl)
        ctrl.$validators.equalTo = function (modelValue, viewVale) {//Inhaltsverzeichnis der benutzerdefinierten Validierung
          var targetValue = targetCtrl.$viewValue;//Wert der Eingabe von password erhalten
          return targetValue == viewVale;//Ist gleich dem Wert von passwordConfirm
        }
        ctrl.$formatters.push(function (value) {
          console.log("Wird der Wert der Datenformatierung durchgeführt:",value)
          Rückgabewert;
        )
        ctrl.$parsers.push(function (value) {
          console.log("Wird der Wert der Datenkonvertierung durchgeführt:",value)
          Rückgabewert;
        )
      }
    }
  }
)

Demonstrationsadresse：https://tianyouh.github.io/angularPasswordConfirm/