Question

我有一个将验证错误映射到表单字段的功能。

export function mapErrorsToForm($form, errorData) {
    $form.find(':input').each(function() {
        var fieldName = $(this).attr('name');
        var $error = $('<div class="invalid-feedback"></div>');
        $error.html(errorData.errors[fieldName]);
        $(this).addClass('is-invalid');
        $(this).after($error);
    });
}

errorData是从ajax响应中填充的，例如：

error: function (jqXHR) {
    var errorData = JSON.parse(jqXHR.responseText);
    mapErrorsToForm($form, errorData);
}

我的问题是某些字段名称具有数组，例如密码确认是这样写的：

<div class="form-row form-group">
    <div class="col">
        <input class="form-control form-control-lg js-password" type="password" name="plainPassword[first]" placeholder="Password">
    </div>
</div>
<div class="form-row form-group">
    <div class="col">
        <input class="form-control form-control-lg js-confirm-password" type="password" name="plainPassword[second]" placeholder="Confirm Password">
    </div>
</div>

如何更新mapErrorsToForm函数，以便将验证错误添加到字段名称中带有数组的字段？

Answer 1

假设您的字段名称中没有任何（*）字符，也许您可以像这样解析名称？

var fieldNames = $('input').attr('name').replace(/\[|\]/g, '*').split('*')
// password -> ['password']
// password[first] -> ['password', 'first']

如果您的errorData.errors如下所示：

{
  password: 'wrong'
}

您可以通过以下方式来纠正错误

var error = errorData.errors[fieldNames[0]]

。或者，如果您的数据如下所示：

{
  password: {
    first: 'first wrong',
    second: 'second wrong'
  }
}

您可以通过以下方式获取错误

var key0 = fieldNames[0];
var key1 = fieldNames[1];
var error = errorData.errors[key0][key1]

在函数中使用es6 rest语法看起来会更好一点：

const getError = ($elem, error) => {
  const [one, two, ...rest] = $elem.attr('name').replace(/\[|\]/g, '*').split('*');
  if (!two) return error[one];
  return error[one][two]
}

具有数组字段名称的Javascript表单验证

1 个答案: