帮校验不通过时,需提示那行报错,以及具体报错信息
时间: 2024-04-10 19:28:55 浏览: 15
可以在校验不通过时,使用js-yaml库的load方法的第二个参数来获取详细的错误信息,并提示具体报错行。以下是更新后的代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>YAML校验工具</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.0/codemirror.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.0/codemirror.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/3.14.1/js-yaml.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.0/mode/yaml/yaml.min.js"></script>
</head>
<body>
<textarea id="yaml-content" rows="10" cols="80"># 在这里输入你的YAML内容</textarea>
<button onclick="validateYaml()">校验</button>
<div id="result"></div>
<script>
function validateYaml() {
var yamlContent = document.getElementById('yaml-content').value;
try {
jsyaml.safeLoad(yamlContent);
document.getElementById('result').innerText = 'YAML内容有效!';
} catch (e) {
var errorLine = e.mark.line + 1;
var errorMessage = e.message;
document.getElementById('result').innerText = 'YAML内容无效,错误行:' + errorLine + ',错误信息:' + errorMessage;
}
}
var yamlEditor = CodeMirror.fromTextArea(document.getElementById('yaml-content'), {
mode: 'yaml',
theme: 'default',
lineNumbers: true
});
</script>
</body>
</html>
```
在`catch`块中,我们获取了错误对象的`mark.line`属性,加1后得到错误行号,同时获取了错误对象的`message`属性,作为具体的错误信息进行提示。
相关推荐
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)