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

كود تحقيق تعليمي لتحقق من كلمة المرور في نموذج 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); // طباعة قائمة خصائص العنصر الحالي
      console.log(ctrl); // طباعة ctrl الحالي
      var target = attrs["equalTo"];//الحصول على قيمة مفتاح الأداة المخصصة
      if (target) {//التحقق من وجود المفتاح
        scope.$watch(target, function () {//الاستماع إلى قيمة
          ctrl.$validate()//الاستدعاء يدويًا عند التغيير
        ) 
        // الحصول على محكم الوالدين للـFormController
        var targetCtrl = ctrl.$$parentForm[target];//الحصول على محكم النموذج المحدد
        console.log(targetCtrl)
        ctrl.$validators.equalTo = function (modelValue, viewVale) {//محتوى مبرمج الأداة المخصصة للتحقق
          var targetValue = targetCtrl.$viewValue;//الحصول على قيمة المدخل الخاصة بالـpassword
          return targetValue == viewVale;//هل يساوي قيمة targetValue قيمة passwordConfirm
        }
        ctrl.$formatters.push(function (value) {
          console.log("قيمة التشكيل الحالية:",value)
          قيمة العودة;
        )
        ctrl.$parsers.push(function (value) {
          console.log("قيمة التحويل الحالية:",value)
          قيمة العودة;
        )
      }
    }
  }
)

عنوان العرض:https://tianyouh.github.io/angularPasswordConfirm/

أنت قد تستمتع بهذا