欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

分别以天数和岁数输入年龄时比较大小是否合理

程序员文章站 2022-07-03 21:44:36
...

应用场景:比如买保险时,有承保的年龄范围,小到几天的婴儿,大到无上限或几岁。输入年龄范围时可选择“天”也可选择“岁”。那么如果选择是“500天——1岁”,是不是就不合理了呢,1岁=365或366天。此时可用以下代码进行判断。

仅用于前“天”后“岁”的转换并比较

function reasonale(day, year) {//通过比较出生日期前后判断
    var nowY = new Date().getFullYear();// 当前年份
    var nowM = new Date().getMonth();// 当前月份
    var nowD = new Date().getUTCDay();// 当前天
    var start = new Date(nowY, nowM, nowD - day).toLocaleDateString();// 起始日期,越小越老
    var end = new Date(nowY - year, nowM, nowD).toLocaleDateString();// 终止日期,越大越年轻
    start = Date.parse(start.replace('/-/g', '/'));
    end = Date.parse(end.replace('/-/g', '/'));
    return start - end > 0 ? true : false;// 后年龄(year)大于前年龄(day)
    }

页面内容:根据实际生活与业务分析,为使得用户体验良好,可先让起始年龄以“天”为单位默认选中,终止年龄以“岁”为单位默认选中。

<div class="layui-input-block " id="limitStr">
                        <div class="layui-input-inline" style="width: 80px">
                            <input type="text" class="layui-input starDAY" autocomplete="off">
                        </div>
                        <div class="layui-input-inline" style="width: 60px">
                            <select class="starDAY" lay-filter="starDAY">
                                <option th:value="D" selected=""></option>
                                <option th:value="Y"></option>
                            </select>
                        </div>
                        <div class="layui-input-inline" style="width: 30px">
                            <span style="height: 30px; line-height: 30px;"> —— </span>
                        </div>
                        <div class="layui-input-inline" style="width: 80px">
                            <input type="text" class="layui-input endDAY" autocomplete="off">
                        </div>
                        <div class="layui-input-inline" style="width: 60px">
                            <select class="endDAY">
                                <option th:value="Y" selected=""></option>
                                <option th:value="D"></option>
                            </select>
                        </div>
                    </div>

js监听select选择框起始年龄的单位的选中情况,如果起始年龄选择的是“岁”,则使得终止年龄仅可以以“岁”为单位,让禁用”天”选项;否则,若起始年龄选择的是“天”,则去掉终止年龄“天”的禁用属性,使其重新可选。这样就不会出现前大后小、前岁后天的情况了。

 form.on('select(starDAY)', function(data) {
    var $option = $(".endDAY option[value='D']");
    $("select.endDAY").val('Y');
    $("input.endDAY").val('');
    if (data.value === 'Y') {
        $option.attr("disabled", true);
    } else {
        $(".endDAY option[value='D']").removeAttr("disabled");
    }
    form.render('select');
    });

表单提交时检验输入年龄范围是否合理

    var ageLimit = '';
    var starN = $("input.starDAY").val();
    var starS = $("select.starDAY").val();// 起始时间选择为'天'的时候,才可能出现'天'与'岁'的比较
    var endS = $("select.endDAY").val();
    var endN = $("input.endDAY").val();
    if (endN === '') {// 年龄无上限,不比较
        endN = '0';
    } else if (starS === 'D' && endS === 'Y') {// 前‘天’后‘岁’
        var star = parseInt(starN);
        var end = parseInt(endN);
        if (!reasonale(star, end)) {
        layer.msg("终止年龄不可比起始年龄小");
        return;
        }
    } else {// 单位相同,要么都是“天”,要么都是“岁”,直接比较年龄大小
        if (end < star) {
        layer.msg("终止年龄不可比起始年龄小");
        return;
        }
    }

    ageLimit = ageLimit + starN + starS + "-" + endN + endS;
    $("input[name=ageLimit]").val(ageLimit);

小知识:new Date(year, month, day).toLocaleDateString()可以获得正确的日期格式。
分别以天数和岁数输入年龄时比较大小是否合理