2016-01-12 19:40:23 +08:00
<!DOCTYPE HTML>
< html >
< head >
< title > JSONEditor | JSON schema validation< / title >
< link href = "../dist/jsoneditor.css" rel = "stylesheet" type = "text/css" >
< script src = "../dist/jsoneditor.js" > < / script >
< style type = "text/css" >
body {
width: 600px;
font: 11pt sans-serif;
}
#jsoneditor {
width: 100%;
height: 500px;
}
< / style >
< / head >
< body >
< h1 > JSON schema validation< / h1 >
< p >
This example demonstrates JSON schema validation. The JSON object in this example must contain properties < code > firstName< / code > and < code > lastName< / code > , can can optionally have a property < code > age< / code > which must be a positive integer.
< / p >
< p >
See < a href = "http://json-schema.org/" target = "_blank" > http://json-schema.org/< / a > for more information.
< / p >
< div id = "jsoneditor" > < / div >
< script >
var schema = {
"title": "Example Schema",
"type": "object",
"properties": {
"firstName": {
"type": "string"
},
"lastName": {
"type": "string"
},
2016-01-15 04:10:30 +08:00
"gender": {
"enum": ["male", "female"]
},
2018-08-12 18:41:02 +08:00
"availableToHire": {
"type": "boolean"
},
2016-01-12 19:40:23 +08:00
"age": {
"description": "Age in years",
"type": "integer",
2019-03-14 00:43:31 +08:00
"minimum": 0,
"examples": [28, 32]
2017-07-05 05:28:28 +08:00
},
"job": {
"$ref": "job"
2016-01-12 19:40:23 +08:00
}
},
"required": ["firstName", "lastName"]
};
2017-07-05 05:28:28 +08:00
var job = {
"title": "Job description",
"type": "object",
2018-08-12 18:41:02 +08:00
"required": ["address"],
2017-07-05 05:28:28 +08:00
"properties": {
"company": {
"type": "string"
},
"role": {
"type": "string"
2018-08-12 18:41:02 +08:00
},
"address": {
"type": "string"
},
"salary": {
"type": "number",
2019-03-14 00:43:31 +08:00
"minimum": 120,
"examples": [100, 110, 120]
2017-07-05 05:28:28 +08:00
}
}
};
2016-01-12 19:40:23 +08:00
var json = {
firstName: 'John',
lastName: 'Doe',
2016-01-15 04:10:30 +08:00
gender: null,
2018-08-12 18:41:02 +08:00
age: "28",
availableToHire: 1,
2017-07-05 05:28:28 +08:00
job: {
company: 'freelance',
2018-08-12 18:41:02 +08:00
role: 'developer',
salary: 100
2017-07-05 05:28:28 +08:00
}
2016-01-12 19:40:23 +08:00
};
var options = {
2017-07-05 05:28:28 +08:00
schema: schema,
2018-08-12 18:41:02 +08:00
schemaRefs: {"job": job},
mode: 'tree',
modes: ['code', 'text', 'tree']
2016-01-12 19:40:23 +08:00
};
// create the editor
var container = document.getElementById('jsoneditor');
var editor = new JSONEditor(container, options, json);
< / script >
< / body >
< / html >
