如何在表單驗證中使用Angular應用jquery的遠程方法？

Question

我正在使用Jquery的遠程方法來檢查用戶名是否已經存在，但是我想使用Angular js對其進行驗證。 使用Jquery進行驗證的代碼是

 $("#registration-form").validate({
    rules: {
           'username': {
            required: true,
            minlength: 3,
            maxlength: 20,
            alphanumeric: true,
            remote: "/users/checkusername"
        },
     }
   });

我是Angular js的新手。 任何相關鏈接都將有所幫助。

Answer 1

HTML

<input type="text" name="username" ng-model="username" 
ng-pattern="/^[a-zA-Z0-9]{4,10}$/" ng-unique="tableDB.userDBField" />

AngularJS

directive('ngUnique', ['$http', function (async) {
  return {
    require: 'ngModel',
    link: function (scope, elem, attrs, ctrl) {
      elem.on('blur', function (evt) {
        scope.$apply(function () {
      var val = elem.val();
      var req = { "username":val, "dbField":attrs.ngUnique }
      var ajaxConfiguration = { method: 'POST', url: 'backendServices/checkUsername.php', data: req };
      async(ajaxConfiguration)
        .success(function(data, status, headers, config) {
          ctrl.$setValidity('unique', data.status);
            });
          });
        });
      }
    }
  }
]);

檢查完整的文檔表單驗證：AngularJS方式

Answer 2

我在AngularJS和jQuery Validation插件之間建立了一座橋梁。 它使您能夠在控制器內定義驗證選項（規則，消息等），因此您不必為每種形式或規則創建新的指令。

試試看： https : //github.com/jpkleemans/angular-validate 。 反饋非常感謝！

Answer 3

以下網址將為您提供使用angular進行表單驗證的分步指南，完全不必使用JQuery。

http://scotch.io/tutorials/javascript/angularjs-form-validation