表单保存或提交前，如何验证JSON字符串的有效性？

一、前端原生JavaScript基础验证 #

这是最直接的实现方式，利用JSON.parse()的特性——解析非法JSON时会抛出异常，以此判断格式是否合法：

• 实现逻辑：监听表单提交事件或输入框的实时输入事件，对输入字符串尝试解析，捕获异常并给出用户提示
• 代码示例：

// 验证JSON格式的工具函数
function validateJson(inputElement) {
  const jsonContent = inputElement.value.trim();
  if (!jsonContent) {
    alert('请输入JSON内容');
    return false;
  }
  try {
    JSON.parse(jsonContent);
    return true;
  } catch (err) {
    alert(`JSON格式错误：${err.message}`);
    return false;
  }
}

// 绑定表单提交事件，阻止非法提交
document.getElementById('target-form').addEventListener('submit', function(e) {
  const jsonInput = document.getElementById('json-textarea');
  if (!validateJson(jsonInput)) {
    e.preventDefault();
  }
});

• 优化点：给输入框添加input事件监听，实现实时验证，让用户即时看到格式是否正确；验证通过后可自动格式化JSON内容，帮助用户确认数据结构。

二、基于JSON Schema的严格验证 #

如果需要确保JSON符合特定的数据结构（比如必须包含指定字段、字段类型匹配），可以使用专业验证库（如AJV）：

• 实现逻辑：先定义目标JSON的Schema规则，解析输入字符串后，验证其是否符合规则
• 代码示例：

// 初始化AJV实例（需先引入AJV库）
const ajv = new Ajv();

// 定义JSON Schema规则
const dataSchema = {
  type: 'object',
  properties: {
    username: { type: 'string', minLength: 3 },
    email: { type: 'string', format: 'email' },
    age: { type: 'number', minimum: 16 }
  },
  required: ['username', 'email']
};

// 带Schema校验的验证函数
function validateJsonWithSchema(jsonStr) {
  try {
    const parsedData = JSON.parse(jsonStr);
    const validate = ajv.compile(dataSchema);
    const isValid = validate(parsedData);
    if (!isValid) {
      alert(`JSON不符合要求：${ajv.errorsText(validate.errors)}`);
      return false;
    }
    return true;
  } catch (err) {
    alert(`JSON格式错误：${err.message}`);
    return false;
  }
}

三、后端二次验证 #

前端验证仅用于提升用户体验，为避免恶意提交或前端验证被绕过，后端接收数据后必须再次验证：

• 以Node.js为例的后端验证代码：

app.post('/save-data', (req, res) => {
  const jsonInput = req.body.jsonContent;
  try {
    const parsedData = JSON.parse(jsonInput);
    // 这里可添加业务规则校验或Schema验证
    res.status(200).send('数据验证通过，已保存');
  } catch (err) {
    res.status(400).send(`JSON验证失败：${err.message}`);
  }
});

内容的提问来源于stack exchange，提问作者Pete Atkin