Ajv format校驗(yàn)使用示例分析
初始化項(xiàng)目demo
npm init -y
安裝 Ajv 版本 7
npm install ajv
安裝ajv-formats插件
// ESM/TypeScript import
import Ajv from "ajv"
import addFormats from "ajv-formats"
// Node.js require:
const Ajv = require("ajv")
const addFormats = require("ajv-formats")
const ajv = new Ajv()
addFormats(ajv)
運(yùn)行分解
新建index.js文件
- 導(dǎo)入ajv和對(duì)應(yīng)的format插件庫(kù)
- 定義對(duì)應(yīng)的schema結(jié)構(gòu)
- 調(diào)用ajv.compile()方法,對(duì)schema進(jìn)行編譯,返回一個(gè)待執(zhí)行的校驗(yàn)函數(shù)
- 執(zhí)行回調(diào)函數(shù),并將我們需要判斷的data,當(dāng)做參數(shù)傳遞
- 判斷返回的結(jié)果
const Ajv = require("ajv")
const addFormats = require("ajv-formats")
const ajv = new Ajv()
addFormats(ajv)
const schema = {
type: "string",
format: 'email',
minLength: 1,
maxLength: 255,
pattern: '/^[a-zA-Z]/'
};
const validate = ajv.compile(schema)
const data = 'string'
const valid = validate(data)
console.log(valid)
if (!valid) console.log(validate.errors)
打開(kāi)控制臺(tái),運(yùn)行node index.js。
分析
在這里我們就可以利用vscode自帶的調(diào)試功能,進(jìn)行代碼分析了。首先,我在19行打了斷點(diǎn),這樣我們就可以觀察到函數(shù)的參數(shù)和調(diào)用情況了。不會(huì)調(diào)試的同學(xué)可以看看這篇文章 新手向:前端程序員必學(xué)基本技能——調(diào)試JS代碼 調(diào)試之后,就可以看到編譯之后的回調(diào)函數(shù)了。如下代碼
(function anonymous(self, scope) {
const schema11 = scope.schema[6];
const formats0 = scope.formats[0];
const func2 = scope.func[1];
const pattern0 = scope.pattern[0];
return function validate10(data, {instancePath = "", parentData, parentDataProperty, rootData = data} = {}) {
let vErrors = null;
let errors = 0;
if (errors === 0) {
if (errors === 0) {
if (typeof data === "string") {
if (func2(data) > 255) {
validate10.errors = [{
instancePath,
schemaPath: "#/maxLength",
keyword: "maxLength",
params: {
limit: 255
},
message: "must NOT have more than 255 characters"
}];
return false;
} else {
if (func2(data) < 1) {
validate10.errors = [{
instancePath,
schemaPath: "#/minLength",
keyword: "minLength",
params: {
limit: 1
},
message: "must NOT have fewer than 1 characters"
}];
return false;
} else {
if (!pattern0.test(data)) {
validate10.errors = [{
instancePath,
schemaPath: "#/pattern",
keyword: "pattern",
params: {
pattern: "/^[a-zA-Z]/"
},
message: "must match pattern "" + "/^[a-zA-Z]/" + """
}];
return false;
} else {
if (!formats0.test(data)) {
validate10.errors = [{
instancePath,
schemaPath: "#/format",
keyword: "format",
params: {
format: "email"
},
message: "must match format "" + "email" + """
}];
return false;
}
}
}
}
} else {
validate10.errors = [{
instancePath,
schemaPath: "#/type",
keyword: "type",
params: {
type: "string"
},
message: "must be string"
}];
return false;
}
}
}
validate10.errors = vErrors;
return errors === 0;
};
});
通過(guò)以上文件我們可以看到,ajv對(duì)我們定義好的shcma進(jìn)行編譯,編譯之后生成了一個(gè)回調(diào)函數(shù)。在回調(diào)函數(shù)中對(duì),定義好的規(guī)則進(jìn)行判斷處理。
首先是對(duì)type類(lèi)型的判斷處理,然后是字符串類(lèi)型的最大長(zhǎng)度、最小長(zhǎng)度和正則的校驗(yàn),最后是對(duì)format的規(guī)則校驗(yàn)。
如果,其中的一項(xiàng)不滿(mǎn)足規(guī)則時(shí),直接會(huì)走到errors里邊,把錯(cuò)誤信息進(jìn)行處理輸出。
總結(jié)
了解Ajv的的判斷邏輯,先進(jìn)行schema的定義,然后compile進(jìn)行schema的編譯、生成回調(diào)函數(shù),最后輸入data數(shù)據(jù)進(jìn)行校驗(yàn)。
在我們定義好schema之后,在string類(lèi)型中,他會(huì)按照先type、字符串最大長(zhǎng)度、最小長(zhǎng)度、正則判斷和format的順序進(jìn)行,data的校驗(yàn)。
以上就是Ajv format校驗(yàn)使用示例分析的詳細(xì)內(nèi)容,更多關(guān)于Ajv format校驗(yàn)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
js實(shí)現(xiàn)異步循環(huán)實(shí)現(xiàn)代碼
這篇文章主要介紹了js實(shí)現(xiàn)異步循環(huán)實(shí)現(xiàn)代碼,需要的朋友可以參考下2016-02-02
JavaScript實(shí)現(xiàn)審核流程狀態(tài)的動(dòng)態(tài)顯示進(jìn)度條
對(duì)于有很多流程的東西,我們希望能夠根據(jù)不同的階段,用流程條對(duì)應(yīng)地進(jìn)行顯示,非常直觀,給用戶(hù)帶來(lái)極好的用戶(hù)體驗(yàn),下面小編給大家分享JavaScript實(shí)現(xiàn)審核流程狀態(tài)的動(dòng)態(tài)顯示進(jìn)度條功能,需要的的朋友參考下2017-03-03
Javascript數(shù)組的?splice?方法詳細(xì)介紹
這篇文章主要介紹了Javascript數(shù)組的splice方法詳細(xì)介紹,splice方法通過(guò)刪除或替換現(xiàn)有元素或者原地添加新的元素來(lái)修改數(shù)組,并以數(shù)組形式返回被修改的內(nèi)容。此方法會(huì)改變?cè)瓟?shù)組2022-09-09
微信小程序自定義select下拉選項(xiàng)框組件的實(shí)現(xiàn)代碼
微信小程序中沒(méi)有select下拉選項(xiàng)框,所以只有自定義。這篇文章主要介紹了微信小程序自定義select下拉選項(xiàng)框組件,需要的朋友可以參考下2018-08-08
js實(shí)現(xiàn)可輸入可選擇的select下拉框
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)可輸入可選擇的select下拉框,可及時(shí)匹配包含輸入的內(nèi)容,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12
TypeScript中定義變量方式以及數(shù)據(jù)類(lèi)型詳解
TypeScript支持 JavaScript的所有語(yǔ)法和語(yǔ)義,同時(shí)通過(guò)作為ECMAScript的超集來(lái)提供一些額外的功能,如類(lèi)型檢測(cè)和更豐富的語(yǔ)法,這篇文章主要給大家介紹了關(guān)于TypeScript中定義變量方式以及數(shù)據(jù)類(lèi)型詳解的相關(guān)資料,需要的朋友可以參考下2022-08-08
JavaScript直接調(diào)用函數(shù)與call調(diào)用的區(qū)別實(shí)例分析
這篇文章主要介紹了JavaScript直接調(diào)用函數(shù)與call調(diào)用的區(qū)別,結(jié)合額實(shí)例形式分析了JavaScript直接調(diào)用函數(shù)與call調(diào)用的基本用法、區(qū)別及相關(guān)注意事項(xiàng),需要的朋友可以參考下2020-05-05
JavaScript利用split函數(shù)按規(guī)定截取字符串(獲取郵箱用戶(hù)名)
這個(gè)其實(shí)就是利用了js的split函數(shù),以@分割數(shù)組,一般用這個(gè)的地方不多,但這個(gè)思路應(yīng)用的比較廣泛。推薦大家學(xué)習(xí)。2009-12-12
JS實(shí)現(xiàn)滾動(dòng)條觸底加載更多
這篇文章主要介紹了JS滾動(dòng)條觸底加載更多,需要的朋友可以參考下2019-09-09

