时间戳

首页 > 解决方案 > 在 ASP.NET Core MVC 中使用 jquery 验证进行日期和年龄验证

jquery - 在 ASP.NET Core MVC 中使用 jquery 验证进行日期和年龄验证

问题描述

在我在 ASP.NET Core MVC 的第一步中；我正在尝试使用 jQuery 验证对出生日期字段进行验证，因为数据注释不允许这样做，或者我不知道该怎么做。

验证包括用户选择与今天日期不同的日期的第一部分，并至少选择 5 年前的日期，以便以后通过执行计算来验证基于日期的年龄，如图所示是我想要的要做，问题是如何根据我维护的代码来做。

在此处输入图像描述

<script>
    $(document).ready(function() {
        $('#formPaciente').validate({
            rules: {
                txtFecNac: "required",
                txtEdad: {
                    required: true,
                    Range:[5,90]
                }
            },
            messages: {
                txtFecNac: "La Fecha Nacimiento es requerida",
                txtEdad: {
                    required: "Su edad es requerida",
                    Range: "La edad debe ser entre 5 y 90"
                }
            },
        });
    });
</script>

但我的问题首先是如何使用 jQuery 验证根据出生日期计算年龄，其次是能够至少根据我 5 岁的年龄计算来验证出生日期将填写一个名为代表的附加字段，如果它更大，那么我通常会继续下一个字段，这将是执行此验证的正确方法。

我感谢您的帮助

标签： jqueryasp.net-coreasp.net-core-mvcunobtrusive-validation

解决方案

这是我的患者登记表的代码，我将 id 放入脚本中，以便稍后在脚本中验证客户问我的内容。

<div class="form-group col-md-6">
    <label>Fecha de Nacimiento:</label>
    <input id="FecNacVal" asp-for="MODEL_PACIENTE.PAC_FECHA_NAC" type="date" placeholder="FECHA NAC." class="form-control" max=@DateTime.Now.AddYears(-5).ToString("yyyy-MM-dd") />
    <span asp-validation-for="MODEL_PACIENTE.PAC_FECHA_NAC" class="text-danger"></span>
</div>
<div class="form-group col-md-6">
    <label>Edad Paciente:</label>
    <input id="EdadVal" asp-for="MODEL_PACIENTE.PAC_EDAD" type="number" readonly="readonly" placeholder="EDAD" class="form-control" />
    <span asp-validation-for="MODEL_PACIENTE.PAC_EDAD" class="text-danger"></span>
</div>
<div class="form-group col-md-6">
    <label>Representante:</label>
    <input id="RepPacVal" asp-for="MODEL_PACIENTE.PAC_REPRESENTANTE" type="text" disabled placeholder="REPRESENTANTE" class="form-control" />
    <span asp-validation-for="MODEL_PACIENTE.PAC_REPRESENTANTE" class="text-danger"></span>
</div>

我把最后在脚本中的代码

    @section scripts{
    <script>
        $(document).ready(function () {
            $("#FecNacVal").on("change", function () {
                var now = new Date();
                var birthdate = new Date($("#FecNacVal").val()); // Se Procede a calcular en base a la fecha
                var nowyear = now.getFullYear();
                var birthyear = birthdate.getFullYear();
                var age = nowyear - birthyear + 1;
                $('#EdadVal').val(age);
            });
        });
    </script>
    <script>
        $(document).ready(function () {
            $("#FecNacVal").on("change", function () {
                // Accedemos al botón
                var RepresentanteValidacion = document.getElementById('RepPacVal');
                var EdadValidacion = $("#EdadVal").val(); // Obtenemos el Valor del campo Edad
                //console.log(EdadValidacion);
                if (EdadValidacion >= 18) { // Validamos si es mayor o menor
                    // evento para el input Deshabilitado
                    // console.log("Mayor de edad");
                    RepresentanteValidacion.disabled = true; // Deshabilitado
                }
                else if (EdadValidacion < 18) {
                    //console.log("Menor de edad");
                    // evento para el input Habilitar
                    RepresentanteValidacion.disabled = false; // Habilitado
                }
            });
        });
    </script>

    <partial name="_ValidationScriptsPartial">

}

推荐阅读