AngularJS -服务器端验证和客户端表单
我正在尝试了解如何做以下事情：
声明表单的可接受方式是什么。我的理解是您只需在HTML中声明表单，并添加ng-model指令，如下所示：
ng-model="item.name"要发送到服务器的内容。我可以将item对象作为JSON发送到服务器，然后解释它。然后我就可以对对象执行验证了。如果失败，我抛出一个JSON错误，然后返回什么？有没有一种被接受的方法来做这件事？如何以一种好的方式将验证错误从服务器推送到客户端？
我真的需要一个例子，但是Angulars文档很难理解。
编辑:看起来我的问题表达得很糟糕。
我知道如何验证客户端，以及如何将错误/成功作为promise回调处理。我想知道的是，将服务器端错误消息捆绑到客户端的公认方式。假设我有一个用户名和密码注册表单。我不想轮询服务器的用户名，然后使用Angular来确定是否存在重复的用户名。我想要将用户名发送到服务器，验证不存在具有相同名称的其他帐户，然后提交表单。如果发生错误，如何将其发回？
如何将数据按原样(键和值)推送到服务器，并附加一个错误字段，如下所示：
{
...data...
"errors": [
{
"context": null,
"message": "A detailed error message.",
"exceptionName": null
}
]
}然后绑定到DOM。
回答 6
Stack Overflow用户
发布于 2013-05-10 16:30:09
我最近也一直在玩这类东西，我把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]);希望这能有所帮助
Stack Overflow用户
发布于 2013-06-28 06:21:48
嗯，Derek Ekins给出的答案非常好用。但是:如果使用ng-disabled="myForm.$invalid"禁用提交按钮，该按钮将不会自动恢复为启用状态，因为基于服务器的错误状态似乎没有更改。即使您再次编辑表单中的所有字段以符合有效输入(基于客户端验证)，也不会。
Stack Overflow用户
发布于 2013-04-23 20:26:19
默认情况下，表单是正常提交的。如果您没有为表单中的每个字段提供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() {
});
};您还可以通过设置所需的属性来验证数据。
https://stackoverflow.com/questions/16168355
复制相似问题