Data validation is the most challenging and ever-changing part of every enterprise web application. Often validating metadata involves mixing server-side code into JavaScript modules. In this article, you will learn about a good way to cache metadata on the client side with the help of server code that will provide stringified metadata in the form of JSON (JavaScript Object Notation). This approach also allows for handling multi-values and sets of attributes in an Ajax-like manner.
Every application is developed to solve a problem in a certain field. And each field has its own set of rules and specifications that govern data. When the application applies these constraints to the data, the constraints become validations. All applications require validation of user-entered data.
Currently, applications generally use a combination of if-else statements to validate data. These statements contain validation data that is either hard-coded by the developer or placed through server-side code. Typically, developers use server-side code to avoid subtle data changes that might result in a JavaServer Page (JSP).
You can use JavaScript Object Notation (JSON) to group and cache metadata, and use JavaScript functions to access metadata to validate user input.
When you have scattered metadata in JavaScript, you have no control over how much data the server will evaluate and how much data will be passed to the client. All server-side code snippets will be evaluated and sent to the server. However, when caching data using JSON, you have complete control over the amount of metadata sent to the client because the server-side code will generate the metadata in JSON form. This helps send metadata only to the client that corresponds to the user who saw or entered the data.
You can also use JSON to cache user-entered data. After the program caches the data, it will erase the data fields instead of refreshing the screen, similar to Ajax. This way the user can enter another set of data for the same attribute.
Let’s explore how to use JSON to cache metadata.
JSON Overview
Using JSON (JavaScript Object Notation), JavaScript objects will be represented in a specific string form. If a string of such a form is assigned to any JavaScript variable, the variable will then refer to an object constructed from the string assigned to the variable.
For example, suppose there is a policy object with the following properties:
Plan name
Description
Duration
You can use the following JSON string To represent the policy object:
{"Plane":{"Full Life Cover"}, "Description":{"The best life insurance plan"}, "Term":{"20 years"}}
If this string is assigned to any JavaScript variable, the variable will accept data in units of this object. To access data, provide the path to the property you need to access. For this example, assign the above string to a variable named policy :
var policy = {"Plane":{"Full Life Cover"}, "Description":{"The best life insurance plan "}, "Term":{"20 years"}}
Paste this string into the title section of the HTML page and write the following alert:
alert(policy.Plan)
If you view this page in any browser that supports JavaScript, you will see an alert showing the strategy plan.
Example
To demonstrate the performance of JSON, let's look at a person object with a list of vehicle objects and a person object that can own one or more vehicles. Each vehicle has the following attributes:
Brand
Registration Code
CC
The browser UI should allow users to add multiple vehicles with excellent application performance (usually an inherent requirement). Each attribute has some restrictions or validation rules associated with it. You need to specify the following rules:
Brand Name
Brand name must not contain numbers.
The brand name can contain up to two words, with a space in between.
Registration Code
The registration code must be all numbers.
CC
CC must be all numbers.
The minimum value of CC is 50 and the maximum value is 5000.
There will be three input fields corresponding to vehicle attributes where users can enter information. Next, you'll see how to group validation messages into JSON groups and how to access these validation messages.
Traditional Method
Now, when the vehicle data entered by the user is 40CC, the program must display a message stating that the entered data is not within the valid CC range.You can simply display this message using the code in Listing 1:
Listing 1. Traditional code
if(cc || cc > ) {
alert();
}
ResourceList is a server-side class that contains internationalized messages about vehicles (such as vehicleCCRangeMsg). This approach is a slightly messier way to solve the problem:
In this approach, you will add server-side code to all client-side validation functions to check conditions and display messages.
If you change the way metadata and messages are organized (such as server-side classes or variables), you will have a headache changing the client script validation functions that use these metadata and messages.
What can JSON help you do?
How would you feel if you could just reference a JavaScript variable in conditionals and alerts instead of server-side code? There is no need to include server-side code in JavaScript, and changes in saved server-side metadata and messages do not affect client-side scripts. That's a great approach, isn't it? OK, that's what you do when using JSON-based caching metadata.
You will use a JavaScript object to group our validation data and messages into a hierarchy. These messages are then accessed just like hierarchical JavaScript objects. That’s it, you’ve done it!
When this JSON metadata object is ready, the previous JavaScript snippet will look like Listing 2.
Listing 2. Alert with JSON metadata cache object
if(cc
}
Now, the question is who will prepare the JSON metadata object? Well, only the server can do the job. The server must generate this JSON object and serve it to the client (browser). Several Java APIs can help you prepare such (any kind, in fact) JSON objects. See Resources to see those APIs.
A typical way to generate a JSON metadata object is:
Prepare a hierarchical Java object for the entity and its validation messages.
Call toString() on these entities and their validation messages. These entities and their validation messages will most likely be provided to you as a JSON string.
Save the string into a request scope.
In JSP, get the string and assign it to the curly brackets of the JavaScript variable value.
The final vehicle metadata object will look like Listing 3.
清单 3. 验证元数据 JSON 对象
var vehicleValidationsMetadata = {
"BrandName":{
"CanContainDigits":{false},
"MaxWords":{2},
"FormatMessage":{"Brand Name cannot contain digits."},
"WordLimitMessage":{"Brand Name cannot contain more than two words"}
}, "RegistrationNumber":{
"CanContainAlphabets":{false},
"CanContainDigits":{"true"},
"FormatMessage":{"Registration Number can contain only digits."}
},
"CC":{
"minCC":{50},
"maxCC":{5000},
"FormatMessage":
{"CC can only be numeric"},
"RangeMessage":{"CC can be within range of 50 and 5000"}
}
}
服务器必须生成整个字符串，第一行和最后一行除外，因为当前的用户语言环境可能要求使用这些消息（并且只有服务器端代码能完成这项工作）。在这里，需要注意的一点是此元数据对象仅用于验证车辆。更理想的情况是将 vehicle 元数据对象封装到 person 元数据对象中。那样，您就不需要再创建另一个 JavaScript 变量，而只需将该元数据对象包含到 person 元数据对象中。
在将此元数据对象准备好后，您可以使用该对象中的元数据和消息来验证数据输入和显示消息。现在，验证车辆输入信息的 JavaScript 函数看上去就会跟 清单 4 一样。
清单 4. 车辆数据验证函数
function validateVehicleData() {
var brandName = //get brand name from form field
var registrationNumber = //get Registration Number from form field.
var CC = //get CC from form field
var brandNameTokens = brandName.split(' ');
if(brandNameTokens.length > vehicleValidationsMetadata.BrandName.MaxWords) {
alert(vehicleValidationMessages.BrandName.WordLimitMessage);
}
.
.
.
if((!vehicleValidationsMetadata.RegistrationNumber.CanContainAlphabets) &&
isNaN(parseInt(registrationNumber))) {
alert(vehicleValidationMessages.RegistrationNumber.FormatMessage);
}
var ccNum = parseInt(CC);
if(ccNum ccNum > vehicleValidationMessages.CC.maxCC) {
alert(vehicleValidationMessages.CC.RangeMessage);
}
}
这段代码看上去是不是好多了？它没有在 JavaScript 中混入服务器代码。如果服务器端更改存储元数据的方法，则无需再重写客户机脚本。这会使 JSP 编程人员的日子更轻松些。
扩展客户端数据缓存
某些 Web 应用程序要求用户为同一个属性或对象输入多个数据。例如，person-vehicle 要求人员为其拥有的每台车辆都输入数据。If the person owns multiple vehicles, the application must allow the entry of data for multiple vehicles. I will refer to this type of object as a multi-set property. If a multi-set attribute contains any attribute that can hold multiple instances of data, I will call it a multi-valued attribute.
Now, the problem with multi-set attributes and multi-valued attributes is that the data has to be entered into the same input field. That means that the data entered for the first vehicle must be saved before the data for the second vehicle can be entered. You can solve this problem in two ways:
Send the first vehicle's data to the server and clear the input fields to allow the user to enter the next vehicle's data.
Cache the data on the client and clear the input fields to allow the user to enter data for the next vehicle.
The problem with the first method is that each time you enter the data of a vehicle, you need to access the server. This is not good; users will be frustrated if they have to wait for a response from the server after entering vehicle data. To put it another way, the response time of the second method is almost zero. Users can quickly enter all vehicle data without waiting. But what needs to be considered here is how to store the data on the client. Here are some more ways to store data on the client:
Cache the data in some form into a hidden table field when the user clicks to add data for the next vehicle.
Cache data into a JavaScript object.
If you want to store data into hidden fields, you will be annoyed by having to deal with many hidden fields or processing hidden field data every time the user enters new vehicle data. This is just like string operations that require frequent processing of strings.
But the second method of caching data provides an object-oriented approach to caching. When the user enters new vehicle data, you create a new element in the array object. No clumsy string manipulation required. When the user has entered all their vehicle data, you simply build a JSON string derived from the object and send that string to the server by storing it in a hidden field. This method is much better than the first method.
JSON, Data Caching and Ajax Features
When using JSON to cache data to the client, the system will update the data cache object each time the user clicks the Add Vehicle button. The JavaScript function used to accomplish this task might look like Listing 5.
Listing 5. Function for adding vehicle data to a JavaScript object for client-side caching
function addVehicleData() {
var brand = //get vehicle brand; var regNo = //get registration number;
var cc = //get cc;
vehicleData[vehicleData.length] = new Object();
vehicleData[vehicleData.length]. brandName = new Object();
vehicleData[vehicleData.length].brandName = brand;
//same way update other two properties
}
Here, vehicleData is JavaScript variables used to initialize when the user loads the page. It is initialized to a new array object that is either empty or contains the vehicle element of a vehicle previously entered by the user.
After this function saves the data into a JavaScript object, the program can call another function to clear the input field to allow the user to enter new data.
In this type of application, the user is asked to enter a multi-set or multi-valued attribute with the least or most occurrences. You can put these restrictions into a JSON metadata object. In this case, the previous metadata object becomes the code shown in Listing 6.
Listing 6. JSON metadata object with occurrence limit
var vehicleValidationsMetadata = {
"MIN_OCC":{0},
"MAX_OCC": {10},
"MAX_OCC_MSG":{"...."},
"MIN_OCC_MSG":{"....},
//Everything else is the same
}
The addVehicleData() function will then verify the number of occurrences of the data and then add the data to the JavaScript object only if the total number of occurrences does not exceed the allowed limit. Listing 7 shows the check. method.
Listing 7. JSON metadata object limit check
function addVehicleData() {
if(vehicleData.length == vehicleValidationsMetadata.MAX_OCC-1) {
alert (vehicleValidationsMetadata.MAX_OCC_MSG);
} //Everything else is the same
}
The function called when the user submits a page is actually used to verify the minimum number of occurrences. The biggest benefit of this method is that the screen does not need to be refreshed to enter new vehicle data. Providing such static screens used to be the main goal of Ajax technology, but you can now do it with JSON. This is all about updating JSON data objects and manipulating HTML DOM trees via JavaScript. User response time is a minimum since all operations are performed on the client only. You can use JSON to provide Ajax functionality to your application.
When the user clicks the Save button, the program will call another JavaScript function that will stringify this JSON object and store it in a hidden table field that the program submits to the server. JSON.js (see Resources) has a JSON.stringify() function that will take a JavaScript object as input and return a string output.
The server must be able to understand strings in JSON form and generate a server-side object to process and save the data. The Web site http://www.json.org/java/i... provides a Java API that handles most of the needs of Java-based applications.
Conclusion
You have seen the powerful use of JSON in this article. It boils down to this:
JSON provides an excellent object-oriented way to cache metadata on the client.
JSON helps separate validation data and logic.
JSON helps provide the essence of Ajax to web applications.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
