15.1 JSON schema- 创建基础样例

1.使用vite创建项目

1.create-vue (当前官方首选推荐)

npm create vue@latest

2.vite 创建简洁模板

pnpm create vite 选择vue+ts

3.Vue CLI (经典且稳定) 创建完整模板

npm install -g @vue/cli vue create my-project

2. JSON Schema使用

定义json数据结构

校验数据结构

生成表单

参考网站ajv.js.org/guide/getti...

参考网站(json-schema.org/)[https://j...%255Bhttps%3A%2F%2Fjson-schema.org%2F "https://json-schema.org/)%5Bhttps://json-schema.org/")]

参考网站(www.npmjs.com/package/ajv...https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fajv-errors "https://www.npmjs.com/package/ajverrors)https://www.npmjs.com/package/ajv-errors")]

1.安装及使用ajv

npm install ajv 创建test-schmal文件夹，创建demo.ts文件

import Ajv from "ajv"
const ajv = new Ajv() // options can be passed, e.g. {allErrors: true}

const schema = {
  type: "object",
  properties: {
    foo: {type: "integer"},
    bar: {type: "string"},
    email: {type: "string", format: "email"}
  },
  required: ["foo"],
  additionalProperties: false
}

const validate = ajv.compile(schema)

const data = {

  foo: 1,
  bar: "abc"
}
console.log('第一个demo开始执行了')
const valid = validate(data)
if (!valid) console.log(validate.errors)

执行demo.ts文件，控制台输出如下

[
  {
    instancePath: '/foo',
    schemaPath: '#/properties/foo/type',
    keyword: 'type',
    params: { type: 'integer' },
    message: 'must be integer'
  }
]

2.使用format

www.npmjs.com/package/ajv...

字段支持的类型数据

1. 使用ajv.addFormat,ajv.addKeyword配置自定义

import Ajv from "ajv"
import addFormats from 'ajv-formats'
const ajv = new Ajv() // options can be passed, e.g. {allErrors: true}
addFormats(ajv)

// 自定义格式验证函数
ajv.addFormat("test-abc", (data: string) => {
    return data==="abc"
})
// 自定义关键字验证函数
ajv.addKeyword({
    keyword: "isFoo2",
    validate: (schema, data) => {
        console.log('自定义关键字2', schema, data)
        return true
    },
})
ajv.addKeyword({
    keyword: "isFoo3",
    // 编译函数，返回一个验证函数
    compile: (schema, data) => {
        console.log('自定义关键字3', schema, data)
        return ()=>data.isFoo2
    },
    
    metaSchema: {
        //  属性值所属类型
        type: "string"
    }
})

ajv.addKeyword({
    keyword: "isFoo4",
    // 返回值为插入到对应变量的属性中
    macro: (schema, data) => {
        console.log('自定义关键字4', schema, data)
        //
        return {
            minLength: 16
        }
    },
    
    metaSchema: {
        //  属性值所属类型
        type: "string"
    }
})
const schema = {
  type: "object",
  properties: {
    foo: {type: "integer"},
    bar: {type: "string"},
    errors: false,
    test: {type: "string", format: "test-abc"},// 自定义格式验证函数必须是abc
    test2: {type: "string", isFoo2: true},// 自定义关键字validate验证函数
    test3: {type: "string", isFoo3: "string"},// 自定义关键字compile验证函数
    test4: {type: "string", isFoo4: "string"},// 自定义关键字macro验证函数
    email: {type: "string", format: "email"}
  },
  required: ["foo"],
  additionalProperties: false
}

const validate = ajv.compile(schema)

const data = {
  foo: 1,
  bar: "abc",
  test: "abc",
  test2: "abc",
  test3: "abcdefg",
  test4: "abcdefg",
  email: "591822202@qq.com"
}
console.log('第一个demo开始执行了')
const valid = validate(data)
if (!valid) console.log(validate.errors)

3.国际化ajv-i18n

(www.npmjs.com/package/ajv...%255Bhttps%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fajv-i18n "https://www.npmjs.com/package/ajv-i18n)%5Bhttps://www.npmjs.com/package/ajv-i18n")]

4.如何转换错误语言自定义

import Ajv from "ajv"
import addFormats from 'ajv-formats' // 添加内置格式验证函数
import localize from "ajv-i18n" // 添加内置本地化验证函数
const ajv = new Ajv() // options can be passed, e.g. {allErrors: true}
addFormats(ajv)

// 自定义格式验证函数
ajv.addFormat("test-abc", (data: string) => {
    return data==="abc"
})
// 自定义关键字验证函数
ajv.addKeyword({
    keyword: "isFoo2",
    validate: (schema, data) => {
        console.log('自定义关键字2', schema, data)
        return true
    },
})
ajv.addKeyword({
    keyword: "isFoo3",
    // 编译函数，返回一个验证函数
    compile: (schema, data) => {
        console.log('自定义关键字3', schema, data)
        return ()=>data.isFoo3
    },
    
    metaSchema: {
        //  属性值所属类型
        type: "string"
    }
})

ajv.addKeyword({
    keyword: "isFoo4",
    // 返回值为插入到对应变量的属性中
    macro: (schema, data) => {
        console.log('自定义关键字4', schema, data)
        //
        return {
            minLength: 6
        }
    },
    
    metaSchema: {
        //  属性值所属类型
        type: "string"
    }
})
// 自定义报错信息
ajv.addKeyword({
    keyword: "isFoo5",
    validate: function fun(schema, data)  {
        console.log('自定义关键字5', schema, data)
        fun.errors = [
  {
    instancePath: '/test5',
    schemaPath: '#/properties/foo/type',
    keyword: 'type',
    params: { type: 'aaaa' },
    message: '自定义提示错误展示'
  }
]
// 自定义关键字5验证函数，返回false表示校验失败
        return true
    },
})
const schema = {
  type: "object",
  properties: {
    foo: {type: "string"},
    bar: {type: "string"},
    errors: false,
    test: {type: "string", format: "test-abc"},// 自定义格式验证函数必须是abc
    test2: {type: "string", isFoo2: true},// 自定义关键字验证函数
    test3: {type: "string", isFoo3: "string"},// 自定义关键字验证函数
    test4: {type: "string", isFoo4: "string"},// 自定义关键字验证函数
    test5: {type: "string", isFoo5: "string"},// 自定义关键字验证函数
    email: {type: "string", format: "email"}
  },
  required: ["foo"],
  additionalProperties: false
}

const validate = ajv.compile(schema)

const data = {
  foo: "133",
  bar: "abc",
  test: "abc",
  test2: "abc",
  test3: "abcdefg",
  test4: "abcdefg",
  test5: "1234",
  email: "591822202@qq.com"
}
console.log('第一个demo开始执行了')
const valid = validate(data)
// 校验失败报错
if (!valid) {
    // 多语言-转换成中文报错
    localize.zh(validate.errors)
    console.log(validate.errors)
}

5.自定义错误信息ajv-errors

www.npmjs.com/package/ajv...

自定义报错因为国际化转换导致失败