验证动态集合Asp .Net Core

Question

我该如何进行验证，尤其是在客户端上验证主模型上的动态集合？

[Table(name: "hArtigos")]
public class Artigo
{
    public Artigo()
    {
        EstadoArtigoId = 1;
    }

    public int Id { get; set; }

    [StringLength(100)]
    [MaxLength(100)]
    [Display(Name = "Motivo Criação")]
    public string MotivoCriacao { get; set; }

    public virtual ICollection<Componente> Componentes { get; set; }
}


[Table(name: "hComponentes")]
public class Componente
{
    public int Id { get; set; }

    [Required]
    [StringLength(50)]
    [MaxLength(50)]
    public string Nome { get; set; }

    [Required]
    [StringLength(50)]
    [MaxLength(50)]
    public string Base { get; set; }

    [Required]
    public double Comprimento { get; set; }
}

在这里我进行绑定并有一个容器来生成动态输入

  <div class="row">
                    <div class="col-md-4">
                        <label asp-for="ArtigoViewModel.NumComponentes" class="control-label required"></label>
                        <input id="txtNumComponentes" asp-for="ArtigoViewModel.NumComponentes" class="form-control" />
                        <span asp-validation-for="ArtigoViewModel.NumComponentes" class="text-danger"></span>
                        <div id="componentesContainer">

                        </div>

                    </div>
                </div>   

所有的魔术都在这里根据输入的数字呈现内容

  $('#txtNumComponentes').keyup(function () {

                var numComponentes = $('#txtNumComponentes').val();
                var table = '';

                if (numComponentes || numComponentes > 0) {
                    table = '<table class="table">';
                    table += '<thead class="thead-dark">';
                    table += '<tr>';
                    table += '<th>Componente</th>';
                    table += '<th>Base</th>';
                    table += '<th>Comprimento</th>';
                    table += '</tr>';
                    table += '<tbody>';

                    for (var i = 0; i < numComponentes; i++) {

                        table += '<tr>';
                        table += '<td> <input name="Artigo.Componentes[' + i + '].Nome" class="form-control" required /> <span asp-validation-for="Artigo.Componentes[' + i + '].Nome" class="text-danger"></span></td>';
                        table += '<td> <input name="Artigo.Componentes[' + i + '].Base" class="form-control" required /> <span asp-validation-for="Artigo.Componentes[' + i + '].Base" class="text-danger"></span> </td>';
                        table += '<td> <input name="Artigo.Componentes[' + i + '].Comprimento" class="form-control" required /> <span asp-validation-for="Artigo.Componentes[' + i + '].Comprimento" class="text-danger"></span></td>';
                        table += '<tr>';

                    }

                    table += '</tbody>';
                    table += '</table>';
                }

                $('#componentesContainer').html(table);
            });

但是，验证范围或数据验证属性不起作用。唯一值得担心的是html 5 required属性，但是除了自动聚焦之外，它不显示任何消息。

有没有办法解决这个问题？