jQuery实现克隆新增表单行前校验输入元素的方法

直接在原有新增按钮的点击事件最前面加入逐行校验逻辑，所有已录入行校验通过后再执行追加新行的操作即可，具体修改如下：

核心校验逻辑说明 #

• 点击新增按钮时，优先遍历#content_show容器内所有已存在的.i_bike_servicing表单行
• 逐行提取字段做两项规则校验：
  • 日期校验：将from_date和to_date的值转为时间戳对比，要求起始日期必须严格早于结束日期，空值/无效日期直接判定不通过
  • 费用校验：将expenses的值转为数值类型，要求必须是有效数字且严格小于2500，空值/非数字直接判定不通过
• 任意一行校验失败时，弹出对应错误提示（标注具体行号方便定位修改），直接终止后续新增逻辑
• 所有行校验通过后，再执行原有克隆模板、追加新行的逻辑

修改后完整代码 #

<div id="content_add" class="d-none">
    <div class="row i_bike_servicing">
        <div class="col-md-2 ">
            <input type="text" class="form-control" name="bike_servicing[from_place][]">
        </div>
        <div class="col-md-1 ">
            <input type="text" class="form-control datepicker" name="bike_servicing[from_date][]">
        </div>
        
        <div class="col-md-2 ">
            <input type="text" class="form-control" name="bike_servicing[to_place][]">
        </div>
        <div class="col-md-1 ">
            <input type="text" class="form-control datepicker" name="bike_servicing[to_date][]">
        </div>
        <div class="col-md-1 ">
            <input type="text" class="form-control" name="bike_servicing[expenses][]">
        </div>
    </div>
</div>

<div class="row ">
    <div class="col-md-2 ">From Location</div>
    <div class="col-md-1 ">From Date</div>
    <div class="col-md-2 ">To Location</div>
    <div class="col-md-1 ">To Date</div>
    <div class="col-md-1 ">Expenses</div>
    <div class="col-md-1 ">
        <a href="javascript:;" class="btn btn-success btn-xs" id="add_servicing" type="button"><i class="fa fa-plus"></i> add &nbsp;</a>
    </div>
</div>
<div id="content_show">
    <div class="row i_bike_servicing">
        <div class="col-md-2 ">
            <input type="text" class="form-control" name="bike_servicing[from_place][]">
        </div>
        <div class="col-md-1 ">
            <input type="text" class="form-control datepicker" name="bike_servicing[from_date][]">
        </div>
        
        <div class="col-md-2 ">
            <input type="text" class="form-control" name="bike_servicing[to_place][]">
        </div>
        <div class="col-md-1 ">
            <input type="text" class="form-control datepicker" name="bike_servicing[to_date][]">
        </div>
        <div class="col-md-1 ">
            <input type="text" class="form-control" name="bike_servicing[expenses][]">
        </div>
    </div>
</div>

<script>
$('#add_servicing').click(function (e) {
    e.preventDefault();
    let isValid = true;
    let errorMsg = '';

    // 遍历所有已存在的表单行做校验
    $('#content_show .i_bike_servicing').each(function(index) {
        const rowNum = index + 1;
        // 提取当前行字段值
        const fromDateVal = $(this).find('input[name="bike_servicing[from_date][]"]').val().trim();
        const toDateVal = $(this).find('input[name="bike_servicing[to_date][]"]').val().trim();
        const expensesVal = $(this).find('input[name="bike_servicing[expenses][]"]').val().trim();

        // 非空校验
        if (!fromDateVal || !toDateVal || !expensesVal) {
            isValid = false;
            errorMsg = `第${rowNum}行存在未填写的必填字段，请补充完整`;
            return false; // 终止循环
        }

        // 日期先后校验
        const fromTime = new Date(fromDateVal).getTime();
        const toTime = new Date(toDateVal).getTime();
        if (isNaN(fromTime) || isNaN(toTime) || fromTime >= toTime) {
            isValid = false;
            errorMsg = `第${rowNum}行起始日期必须早于结束日期，请检查`;
            return false;
        }

        // 费用阈值校验
        const expensesNum = Number(expensesVal);
        if (isNaN(expensesNum) || expensesNum >= 2500) {
            isValid = false;
            errorMsg = `第${rowNum}行费用必须为小于2500的有效数字，请检查`;
            return false;
        }
    });

    // 校验不通过弹出提示，终止新增逻辑
    if (!isValid) {
        alert(errorMsg);
        return;
    }

    // 所有校验通过，执行新增行逻辑
    let html_clone = $('#content_add').html();
    $('#content_show').append(html_clone);
    // 若使用了第三方日期选择插件，新增行后需重新初始化新行的日期组件，取消下方注释替换为对应初始化逻辑即可
    // $('.datepicker').removeClass('hasDatepicker').datepicker();
});
</script>

注意：如果你的日期字段使用了第三方日期选择插件（比如jQuery UI Datepicker、bootstrap-datepicker等），新增行后需要对新追加的日期输入框重新初始化插件，否则新行的日期选择功能会失效，代码中已经预留了对应逻辑位置。

内容的提问来源于stack exchange，提问作者nischalinn