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

Question

我在 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 岁的年龄计算来验证出生日期我会用它填写一个称为代表的附加字段，如果它更大，那么我通常会继续下一个字段，这将是执行此验证的正确方法。

感谢您的帮助

Answer 1

这是我的患者登记表的代码，我将 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">

}

Answer 2

将此属性添加到日期输入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);
    });