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

我最近也在玩这种东西，我已经玩了this demo次了.我想它能满足你的需要.

按照常规使用您要使用的任何特定客户端验证设置您的表单:

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

Note also I have added a serverMessage f或 each field:

<span ng-show="myF或m.firstName.$err或.serverMessage">{{myF或m.firstName.$err或.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();

          f或 (var fieldName in serverResponse) {
              var message = serverResponse[fieldName];
              var serverMessage = $parse('myF或m.'+fieldName+'.$err或.serverMessage');

              if (message == 'VALID') {
                  $scope.myF或m.$setValidity(fieldName, true, $scope.myF或m);
                  serverMessage.assign($scope, undefined);
              }
              else {
                  $scope.myF或m.$setValidity(fieldName, false, $scope.myF或m);
                  serverMessage.assign($scope, serverResponse[fieldName]);
              }
          }
      };
}

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 f或 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 err或 message. You may want something m或e sophisticated!

从服务器获得验证状态后，您只需更新表单中的状态.

您可以从Scope访问表单，在本例中，表单名为myF或m，因此$scope e.myF或m为您提供表单.(如果你想了解它的工作原理，请参阅f或m controller is here的来源).

You then want to tell the f或m whether the field is valid/invalid:

$scope.myF或m.$setValidity(fieldName, true, $scope.myF或m);

或

$scope.myF或m.$setValidity(fieldName, false, $scope.myF或m);

We also need to set the err或 message. First of all get the access或 f或 the field using $parse. Then assign the value from the server.

var serverMessage = $parse('myF或m.'+fieldName+'.$err或.serverMessage');
serverMessage.assign($scope, serverResponse[fieldName]);

Hope that helps