Javascript 将复杂的错误对象映射到其关联的输入字段

假设我有以下字段

<input name="a" />
<input name="b[0]" />
<input name="b[1]" />
<input name="c[d]" />
<input name="c[e][f]" />

将每个错误映射到其相关输入的有效方法是什么

<input name="a" />
<div class="error">error a</div>
<input name="b[0]" />
<div class="error">error b0</div>
<!-- etc -->

有更好的方法吗？

您可以使用

reduce（）

按当前输入元素的名称获取每个错误，然后在

之后使用
将其添加到当前输入元素之后


var errors={“a”：“error a”，“b”：[“error b0”，“error b1”]，“c”：{“d”：“error cd”，“e”：{“f”：“error cef”}}
函数f（名称，obj）{
返回名称
.split（/[\]{1,2}/）
.filter（布尔值）
.减少（（r，e，i，arr）=>{
返回r[e]| |（r[e]=arr[i+1]？{}:“”）
}，obj）
}
$（“输入”）。每个（函数（）{
let error=f（$（this）.attr（'name'），errors）
if（error.length）$（this）.after（`${error}`）
})

哇，太好了。请您解释一下
r[e]| |（r[e]=arr[i+1]？{}:”
的作用是什么？它在对象或累加器中寻找嵌套值，通过遍历名称数组，它将成为您的错误对象。这个
r[e]| |（r[e]=arr[i+1]？{}:”
只意味着如果它的最后一个元素不匹配，则返回空字符串，否则返回空对象，所以如果找不到某个键，就不会出错
<input name="a" />
<div class="error">error a</div>
<input name="b[0]" />
<div class="error">error b0</div>
<!-- etc -->

$(':input').each(function () {
    var name = this.name.replace(/^([a-z0-9_\-]+)(.*)$/i, 'errors[$1]$2');
    var error = eval(name);

    $(this).after('<div class="error">' + error + '</div>');
});