且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

AngularJS - 服务器端验证和客户端形式

更新时间:2022-06-14 22:59:20

我也一直在用这种事情玩弄最近,我已经怀孕了的此演示。我认为它你需要什么。

I've also been playing around with this kind of thing recently and I've knocked up this demo. I think it does what you need.

设置窗体按正常与任何特定的客户端验证要使用:

Setup your form as per normal with any particular client side validations you want to use:

<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 每个字段:

Note also I have added a serverMessage for each field:

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

这是从服务器回来一个可定制的消息,它的工作原理相同的方式与任何其他错误信息(只要我可以告诉)。

This is a customisable message that comes back from the server and it works the same way as any other error message (as far as I can tell).

下面是控制器:

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]);
              }
          }
      };
}

我是pretending来调用 pretendThisIsOnTheServerAndCalledViaAjax 服务器你可以用一个Ajax调用替换它,关键是它只是返回验证状态每个字段。在这个简单的情况下,我使用值有效来表示该字段是有效的,任何其他值将被视为一个错误信息。您可能需要一些更复杂!

I am pretending to call the server in pretendThisIsOnTheServerAndCalledViaAjax you can replace it with an ajax call, the point is it just returns the validation state for each field. In this simple case I am using the value VALID to indicate that the field is valid, any other value is treated as an error message. You may want something more sophisticated!

一旦你从服务器验证状态,你只需要在你的形式来更新状态。

Once you have the validation state from the server you just need to update the state in your form.

您可以从范围内访问的形式,在这种情况下,形式称为 myForm会因此$ scope.myForm让你的形式。 (图片来源为形式控制器是这里,如果你想它是如何工作的读了)。

You can access the form from scope, in this case the form is called myForm so $scope.myForm gets you the form. (Source for the form controller is here if you want to read up on how it works).

您再要告诉表单字段是否有效/无效:

You then want to tell the form whether the field is valid/invalid:

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

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

我们还需要设置错误消息。首先,获得使用$解析领域的访问。然后分配来自服务器的值

We also need to set the error message. First of all get the accessor for the field using $parse. Then assign the value from the server.

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

希望帮助