在自定义验证中使用 Angular JS + Laravel 检查当前密码答案

【问题标题】：Current Password checking with Angular JS + Laravel In Custom Validation在自定义验证中使用 Angular JS + Laravel 检查当前密码
【发布时间】：2015-10-15 21:57:42
【问题描述】：

我昨天开始了一个 angular + laravel 项目，现在我停止了，因为 angular 出现了一些错误。

这是我的代码。 HTML。

<div class="form-group" ng-controller="CheckPawd">
  <label>Current Password</label>
  <input type="text" name="cpwd" ng-model="cpwd" ng-keyup="checkerPwd()" class="form-control" placeholder="Enter Current Password" required>
  <p class="invalid" ng-show="!pwdChnge.cpwd.$pristine && pwdChnge.cpwd.$error.required">&#x21E7; Current Password is required</p>
  <p class="invalid" ng-show="checker">&#x21E7; Current Password is not matching</p>
</div>

角度控制器。

app.controller('CheckPawd',function($scope,$http){
  $scope.checkerPwd = function(){
        $http({
        method:'post',
        url:'checkPwd',
        data:$.param({pwdd:$scope.cpwd})
    }).success(function (data,response){
    console.log(data);
    if(data=="1"){
        $scope.checker=null;
    }else{
        $scope.checker = data;
    }
    });
  };
});

Laravel 函数。

public function checkPwd()
{
    if(Hash::check(Input::get('pwdd'), Auth::user()->password))
    {
        return 1;
    }else{
        return 0;
    }
}

此部分位于更改密码区域。一共有三个字段，

当前密码、新密码、确认新密码

当用户输入当前密码时，我需要使用 api 检查是否有效。

如何使用自定义验证规则.. 使用上面的代码，在 api 调用结果中出现错误后，我无法禁用提交按钮。

我该如何解决这个问题...？

【问题讨论】：

标签： javascript angularjs validation laravel-4

【解决方案1】：

我认为使用 angular 中的 asnc $http 请求验证密码的方法是使用带有异步验证器的指令。

这里有一个很好的例子 http://www.codelord.net/2014/11/02/angularjs-1-dot-3-taste-async-validators/ 如何向 ngModel.$asyncValidators 添加验证器。

因为检查密码是一项昂贵的操作，我建议使用带有 debounce 的 ng-model-options 以便检查只发生在所有 500 毫秒或 keyup https://docs.angularjs.org/api/ng/directive/ngModelOptions

ng-model-options="{ debounce : { default : 500 } }"

或

ng-model-options="{ updateOn: 'keyup blur' }

【讨论】：