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

Posted 2023-03-14

【中文标题】在自定义验证中使用 Angular JS + Laravel 检查当前密码

【英文标题】：Current Password checking with Angular JS + Laravel In Custom Validation

【发布时间】：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 调用结果中出现错误后，我无法禁用提交按钮。

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

【参考方案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'