我正在 Java 中进行后端验证，并在验证后返回 AngularJS 错误信息。如何分别显示每个选中字段的错误？
Main.js - 使用 AngularJS 的文件
var app = angular.module('myShoppingList', ['ngRoute','ngStorage', 'ngMessages']);
//some code
$scope.listCustomers;
$scope.postFunc = function(){
if ($scope.formCust) {
$scope.listCustomers =this.formCust;
$scope.formCust = {};
}
var urlInfo = "/save";
var config = {
headers : {
'Content-Type': 'application/json',
'Accept': 'application/json'
}
}
var dataArr = $scope.listCustomers;
$http.post(urlInfo, dataArr, config).then(function (response) {
$scope.postDivAvailable = true;
$scope.postCust = response.data;
}, function error(response) {
$scope.postResultMessage = response.data;
});
$scope.listCustomers = [];
$scope.result = 'Success!';
}
});
shipping.html - 带有输入表单的 html 文件
<!DOCTYPE html>
<html ng-app='myShoppingList' ng-cloak="">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ngStorage/0.3.11/ngStorage.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-messages.js"></script>
<script type="text/javascript" src="/js/main.js"></script>
<title>Shipping Page</title>
</head>
<body>
<h1>Shipping information</h1>
<form ng-submit="postFunc()" ng-controller="myCtrl">
<table>
<tr>
<td><label for="firstName">First name:</label><td>
<td><input type="text" id="firstName" placeholder="Enter first name" ng-model="formCust.firstName" required/><td>
<tr>
<tr>
<td><label for="phoneNumber">Phone number:</label><td>
<td><input type="text" id="phoneNumber" placeholder="Enter phone number" ng-model="formCust.phoneNumber" required/><td>
<tr>
<tr>
<td><label for="cardNumber">Card number:</label><td>
<td><input type="text" id="cardNumber" placeholder="Enter card number" ng-model="formCust.cardNumber" required/><td>
<tr>
</table>
<button type="submit">Submit</button> {{postResultMessage}}
</form>
</body>
</html>
现在我的回复如下所示:
如何将每个错误信息放在相应字段附近？
最佳答案
对于表单字段的后端验证，最好的选择是使用架构验证
首先创建您的架构，该架构将验证对象的所有字段并将其存储在后端代码的类路径中。
schema.json
{
"$schema": "http://json-schema.org/draft-04/schema#",
"title": "Product",
"description": "A product from the catalog",
"type": "object",
"properties": {
"firstName": {
"description": "The first name of the user",
"type": "string"
},
"phoneNumber": {
"description": "Phone number of the user",
"type": "string"
},
"cardNumber": {
"description": "Card number of the user",
"type": "string",
}
},
"required": ["firstName", "phoneNumber", "cardNumber"]
}
依赖
<dependency>
<groupId>org.everit.json</groupId>
<artifactId>org.everit.json.schema</artifactId>
<version>1.3.0</version>
</dependency>
这可以在Java中的Validator类中使用
JSONObject jsonSchema = new JSONObject( new
JSONTokener(JSONSchemaTest.class.getResourceAsStream("/schema.json")));
JSONObject jsonSubject = new JSONObject(userObject);
Schema schema = SchemaLoader.load(jsonSchema);
schema.validate(jsonSubject);
这将验证整个对象并在任何字段无效时返回异常。您可以将该异常从 java 返回到 Angular JS 代码。
关于java - 如何分别实现每个字段验证时的错误输出？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61732631/