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"]
},
2016-01-12 19:40:23 +08:00
"age": {
"description": "Age in years",
"type": "integer",
"minimum": 0
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",
"properties": {
"company": {
"type": "string"
},
"role": {
"type": "string"
}
}
};
2016-01-12 19:40:23 +08:00
var json = {
firstName: 'John',
lastName: 'Doe',
2016-01-15 04:10:30 +08:00
gender: null,
2017-07-05 05:28:28 +08:00
age: 28,
job: {
company: 'freelance',
role: 'developer'
}
2016-01-12 19:40:23 +08:00
};
var options = {
2017-07-05 05:28:28 +08:00
schema: schema,
schemaRefs: {"job": job}
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 >
