根据后端需求,部分输入框需要限制用户输入合法的 JSON 内容,当输入格式不标准时需给出提示。此前我没有接触过这类格式校验场景,先通过查阅资料确认前端可以实现 JSON 格式验证,再基于参考内容进行修改和优化,最终完成了输入框的 JSON 格式校验功能。
先上代码
if (!value) {
callback();
} else if (typeof value == " string " && value != " { " && value != " } ") {
try {
let obj = JSON.parse(value);
if (typeof obj == " object ") {
callback();
} else {
callback(new Error(" 请输入Json格式数据 "));
}
} catch (error) {
callback(new Error(" 请输入Json格式数据 "));
}
} else {
callback(new Error(" 请输入Json格式数据 "));
}
};
由于该输入项为非必填项,所以先判断值是否为空,为空时直接跳过校验,不做后续处理。
接下来先校验数据类型是否为字符串,因为合法的 JSON 一定是字符串格式,但字符串不一定是 JSON。在测试过程中我发现,单独输入 { 或 } 时不会报错,因此额外增加了对这两种特殊字符的判断处理。
之后通过 JSON.parse() 尝试解析字符串。如果能成功解析为对象,则说明是合法 JSON;若解析失败,则判定为非法 JSON 格式。
之所以使用 try...catch,是因为 JSON.parse() 在解析不合法的 JSON 字符串时会直接抛出错误,导致后续代码中断执行。使用 try...catch 可以捕获解析过程中的异常,即使解析出错,也不会影响其他代码正常运行,程序会进入 catch 分支执行提示逻辑。