AngularJS -服务器端验证和客户端表单

sigwle7e  于 2022-12-26  发布在  Angular
关注(0)|答案(9)|浏览(170)

我正在努力理解如何做以下事情:
什么是公认的声明表单的方式?我的理解是你只需要用HTML声明表单,然后像这样添加ng-model指令:

ng-model="item.name"

向服务器发送什么。我可以将item对象以JSON格式发送到服务器,并解释它。然后我可以对对象执行验证。如果验证失败,我抛出一个JSON错误,并返回什么?有没有一种可接受的方法来完成此操作?我如何以一种好的方式将验证错误从服务器推送到客户端?
我真的需要一个例子,但Angular 的文件是相当难以理解。
编辑:看来我的问题表达得不好。
我知道如何验证客户端,以及如何将错误/成功处理为承诺回调。我想知道的是,将服务器端错误消息绑定到客户端的可接受方式。假设我有一个用户名和密码注册表单。我不想轮询服务器以查找用户名,然后使用Angular确定是否存在重复。我想将用户名发送到服务器,确认没有其他帐户存在相同的名称,然后提交表单。如果发生错误,我如何将其发回?
将数据按原样(键和值)推送到服务器,并附加一个错误字段,如下所示:

{
  ...data...

  "errors": [
    {
      "context": null,
      "message": "A detailed error message.",
      "exceptionName": null
    }
  ]
}

然后绑定到DOM。

wgmfuz8q

wgmfuz8q1#

我在一些项目中需要这个,所以我创建了一个指令,最后花了一点时间把它放在GitHub上,供任何想要一个直接解决方案的人使用。
https://github.com/webadvanced/ng-remote-validate

特点:

  • 提供 AJAX 验证任何文本或密码输入的解决方案
  • 与内置的Angular 验证一起使用,可以在formName. inputName.$error.ngRemoteValidate中访问
  • 限制服务器请求(默认值为400毫秒),可以使用ng-remote-throttle="550"进行设置
  • 允许使用ng-remote-method="GET"的HTTP方法定义(默认POST)要求用户输入其当前密码和新密码的更改密码表单的示例用法。注意:

更改密码

当前要求当前密码不正确。请输入当前帐户密码。

<label for="newPassword">New</label>
<input type="password"
       name="newPassword"
       placeholder="New password"
       ng-model="password.new"
       required>

<label for="confirmPassword">Confirm</label>
<input ng-disabled=""
       type="password"
       name="confirmPassword"
       placeholder="Confirm password"
       ng-model="password.confirm"
       ng-match="password.new"
       required>
<span ng-show="changePasswordForm.confirmPassword.$error.match">
    New and confirm do not match
</span>

<div>
    <button type="submit" 
            ng-disabled="changePasswordForm.$invalid" 
            ng-click="changePassword(password.new, changePasswordForm);reset();">
        Change password
    </button>
</div>
sshcrbum

sshcrbum2#

作为变体

// ES6 form controller class

class FormCtrl {
 constructor($scope, SomeApiService) {
   this.$scope = $scope;
   this.someApiService = SomeApiService;
   this.formData = {};
 }

 submit(form) {
   if (form.$valid) {
     this.someApiService
         .save(this.formData)
         .then(() => {
           // handle success

           // reset form
           form.$setPristine();
           form.$setUntouched();

           // clear data
           this.formData = {};
         })
         .catch((result) => {
           // handle error
           if (result.status === 400) {
             this.handleServerValidationErrors(form, result.data && result.data.errors)
           } else {// TODO: handle other errors}
         })
   }
 }

 handleServerValidationErrors(form, errors) {
  // form field to model map
  // add fields with input name different from name in model
  // example: <input type="text" name="bCategory" ng-model="user.categoryId"/>
  var map = {
    categoryId: 'bCategory',
    // other
  };

  if (errors && errors.length) {
    // handle form fields errors separately
    angular.forEach(errors, (error) => {
      let formFieldName = map[error.field] || error.field;
      let formField = form[formFieldName];
      let formFieldWatcher;

      if (formField) {
        // tell the form that field is invalid
        formField.$setValidity('server', false);

        // waits for any changes on the input
        // and when they happen it invalidates the server error.
        formFieldWatcher = this.$scope.$watch(() => formField.$viewValue, (newValue, oldValue) => {
          if (newValue === oldValue) {
            return;
          }

          // clean up the server error
          formField.$setValidity('server', true);

          // clean up form field watcher
          if (formFieldWatcher) {
            formFieldWatcher();
            formFieldWatcher = null;
          }
        });
      }
    });

  } else {
    // TODO: handle form validation
    alert('Invalid form data');
  }
}
g6baxovj

g6baxovj3#

据我所知,这个问题是关于从服务器向客户端传递错误的。我不确定是否有成熟的实践。所以我将描述一种可能的方法:

<form name="someForm" ng-submit="submit()" ng-controller="c1" novalidate>
    <input name="someField" type="text" ng-model="data.someField" required>
    <div ng-show="someForm.$submitted || someForm.someField.$touched">
        <div ng-show="someForm.someField.$error.required" class="error">required</div>
        <div ng-show="someForm.someField.$error.someError" class="error">some error</div>
    </div>
    <input type="submit">
</form>

假设服务器返回以下类型的对象:

{errors: {
    someField: ['someError'],
}}

然后,您可以通过以下方式将错误传递到UI:

Object.keys(resp.errors).forEach(i => {
    resp.errors[i].forEach(c => {
        $scope.someForm[i].$setValidity(c, false);
        $scope.someForm[i].$validators.someErrorResetter
            = () => $scope.someForm[i].$setValidity(c, true);
    });
});

我使每个字段无效并添加一个验证器(实际上不是验证器),因为每次更改后都会调用验证器,所以我们可以重置错误状态。
你可以尝试一下here,你也可以试试ngMessages,还有几个relatedarticles

zte4gxcn

zte4gxcn4#

我最近也在玩这类东西,我搞到了this demo,我想它能满足你的需要。
使用您要使用的任何特定客户端验证正常设置表单:

<div ng-controller="MyCtrl">
    <form name="myForm" onsubmit="return false;">
        <div>
            <input type="text" placeholder="First name" name="firstName" ng-model="firstName" required="true" />
            <span ng-show="myForm.firstName.$dirty && myForm.firstName.$error.required">You must enter a value here</span>
            <span ng-show="myForm.firstName.$error.serverMessage">{{myForm.firstName.$error.serverMessage}}</span>
        </div>
        <div>
            <input type="text" placeholder="Last name" name="lastName" ng-model="lastName"/>
            <span ng-show="myForm.lastName.$error.serverMessage">{{myForm.lastName.$error.serverMessage}}</span>
        </div>
        <button ng-click="submit()">Submit</button>
    </form>
</div>

还请注意,我为每个字段添加了一个serverMessage

<span ng-show="myForm.firstName.$error.serverMessage">{{myForm.firstName.$error.serverMessage}}</span>

这是一个从服务器返回的可定制消息,它的工作方式与任何其他错误消息相同(据我所知)。
下面是控制器:

function MyCtrl($scope, $parse) {
      var pretendThisIsOnTheServerAndCalledViaAjax = function(){
          var fieldState = {firstName: 'VALID', lastName: 'VALID'};
          var allowedNames = ['Bob', 'Jill', 'Murray', 'Sally'];
          
          if (allowedNames.indexOf($scope.firstName) == -1) fieldState.firstName = 'Allowed values are: ' + allowedNames.join(',');
          if ($scope.lastName == $scope.firstName) fieldState.lastName = 'Your last name must be different from your first name';
          
          return fieldState;
      };
      $scope.submit = function(){
          var serverResponse = pretendThisIsOnTheServerAndCalledViaAjax();

          for (var fieldName in serverResponse) {
              var message = serverResponse[fieldName];
              var serverMessage = $parse('myForm.'+fieldName+'.$error.serverMessage');
              
              if (message == 'VALID') {
                  $scope.myForm.$setValidity(fieldName, true, $scope.myForm);
                  serverMessage.assign($scope, undefined);
              }
              else {
                  $scope.myForm.$setValidity(fieldName, false, $scope.myForm);
                  serverMessage.assign($scope, serverResponse[fieldName]);
              }
          }
      };
}

我假装用pretendThisIsOnTheServerAndCalledViaAjax调用服务器,你可以用 AJAX 调用代替它,关键是它只返回每个字段的验证状态。在这个简单的例子中,我使用值VALID来指示字段是有效的,任何其他值都被视为错误消息。你可能需要更复杂的东西!
从服务器获得验证状态后,只需更新表单中的状态。
您可以从scope访问表单,在本例中,表单名为myForm,因此$scope.myForm可以获取表单(如果您想了解form controller is here的工作原理,请参阅其源代码)。
然后,您要告诉窗体该字段是有效还是无效:

$scope.myForm.$setValidity(fieldName, true, $scope.myForm);

$scope.myForm.$setValidity(fieldName, false, $scope.myForm);

我们还需要设置错误消息。首先使用$parse获取字段的访问器。然后从服务器分配值。

var serverMessage = $parse('myForm.'+fieldName+'.$error.serverMessage');
serverMessage.assign($scope, serverResponse[fieldName]);
deyfvvtc

deyfvvtc5#

我有一个与Derek类似的解决方案,在codetunes blog.TL中描述过; DR:

  • 显示错误的方式与Derek的解决方案类似:
<span ng-show="myForm.fieldName.$error.server">{{errors.fieldName}}</span>
  • add指令,当用户更改输入时,该指令将清 debugging 误:
<input type="text" name="fieldName" ng-model="model.fieldName" server-error />

angular.module('app').directive 'serverError', ->
  {
    restrict: 'A'
    require: '?ngModel'
    link: (scope, element, attrs, ctrl) ->
      element.on 'change', ->
        scope.$apply ->
          ctrl.$setValidity('server', true)
  }
  • 通过将错误消息传递给作用域并告知窗体有错误来处理错误:
errorCallback = (result) ->
  # server will return something like:
  # { errors: { name: ["Must be unique"] } }
  angular.forEach result.data.errors, (errors, field) ->
    # tell the form that field is invalid
    $scope.form[field].$setValidity('server', false)
    # keep the error messages from the server
    $scope.errors[field] = errors.join(', ')

希望对大家有用:)

1dkrff03

1dkrff036#

好吧,德里克·艾金斯给出的答案是非常好的工作。但是:如果你用ng-disabled="myForm.$invalid"禁用了提交按钮-该按钮不会自动恢复为启用状态,因为基于服务器的错误状态似乎没有改变。即使你再次编辑表单中的所有字段以符合有效输入(基于客户端验证)。

fgw7neuy

fgw7neuy7#

默认情况下,表单是正常提交的,如果你没有为表单中的每个字段提供name属性,那么它就不会提交正确的数据,你可以做的是在表单提交之前捕获它,然后自己通过 AJAX 提交数据。

<form ng-submit="onSubmit(); return false">

然后在$scope.onSubmit()函数中:

$scope.onSubmit = function() {
  var data = {
    'name' : $scope.item.name
  };
  $http.post(url, data)
    .success(function() {
    })
    .failure(function() {

    });
};

还可以通过设置所需属性来验证数据。

tnkciper

tnkciper8#

如果您选择ngResource,它将如下所示

var Item = $resource('/items/');
$scope.item = new Item();
$scope.submit = function(){
  $scope.item.$save(
    function(data) {
        //Yahooooo :)
    }, function(response) {
        //oh noooo :(
        //I'm not sure, but your custom json Response should be stick in response.data, just inspect the response object 
    }
  );
};

最重要的是,您的HTTP响应代码必须是4xx才能进入失败回调。

blmhpbnm

blmhpbnm9#

从2014年7月开始,AngularJS 1.3增加了新的表单验证特性,包括ngMessages和asyncValidators,这样你就可以在提交表单之前对每个字段进行服务器端验证。

Angular 1.3表单验证教程

相关问题