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

Question

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

验证包括用户的第一部分 select 与今天的日期不同的日期和至少 select 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 岁，我将填写一个名为代表的附加字段，如果它更大，那么我通常会继续下一个字段，这将是执行此验证的正确方法。

感谢您的帮助

Answer 1

将此属性添加到日期输入中max=@DateTime.Now.AddYears(-5).ToString("yyyy-MM-dd")

就像这样：

<div class="form-group">
            <label asp-for="birthday" class="control-label"></label>
            <input asp-for="birthday" class="form-control" max=@DateTime.Now.AddYears(-5).ToString("yyyy-MM-dd")/>
            <span asp-validation-for="birthday" class="text-danger"></span>
        </div>

结果如下所示，无需再次验证。

要计算年龄，只需为日期输入添加一个 Onchange 事件，并根据用户点击的出生日期，更新年龄输入。

$("#tarDate").on("change", function () {
        var now = new Date();
        var birthdate = new Date($("#tarDate").val());
        var nowyear = now.getFullYear();
        var birthyear = birthdate.getFullYear();
        var age = nowyear - birthyear + 1;
        $('#age').val(age);
    });

Answer 2

这是我的病人登记表的代码，我把 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">

}

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

Date and age validation with jquery validation in ASP.NET Core MVC

jquery

unobtrusive-validation

asp.net-core-mvc

asp.net-core