动态表单生成文本框数字小数验证失效及两类验证类选择问题

嘿，我太懂这种动态表单的坑了！你遇到的问题核心原因很简单：动态生成的文本框在页面初始化的时候根本不存在，所以你如果提前给这类元素绑定验证事件，代码根本找不到要绑定的对象，自然就失效了。给你两个实用的解决方案：

方案一：生成文本框后立刻绑定验证逻辑 #

在你创建完文本框的瞬间，直接给它挂上验证规则，这样元素刚生成就能生效：

$('#btnASizeR').click(function () {
    var i = $("#WireDimTbl tbody>tr").length + 1;
    // 创建新的文本框，给个统一类名方便管理
    var newInput = $('<input type="text" id="wireDim_' + i + '" class="wire-dim-input">');
    
    // 绑定输入验证：只允许数字和单个小数点
    newInput.on('input', function() {
        let inputVal = $(this).val();
        // 过滤掉非数字和非小数点的字符
        inputVal = inputVal.replace(/[^0-9.]/g, '');
        // 确保最多只有一个小数点
        if (inputVal.split('.').length > 2) {
            inputVal = inputVal.slice(0, -1);
        }
        $(this).val(inputVal);
    });
    
    // 把文本框加到表格里
    $('#WireDimTbl tbody').append(`<tr><td>${newInput[0].outerHTML}</td></tr>`);
});

方案二：用事件委托（更推荐，代码更简洁） #

利用jQuery的事件委托机制，把验证事件绑定到已经存在的父元素（比如表格的tbody）上，这样不管后续生成多少个文本框，父元素都会帮着处理验证逻辑：

// 页面加载完成后就绑定事件委托
$(function() {
    // 给tbody绑定input事件，指定只处理.wire-dim-input类的元素
    $('#WireDimTbl tbody').on('input', '.wire-dim-input', function() {
        let inputVal = $(this).val();
        inputVal = inputVal.replace(/[^0-9.]/g, '');
        if (inputVal.split('.').length > 2) {
            inputVal = inputVal.substring(0, inputVal.lastIndexOf('.'));
        }
        $(this).val(inputVal);
    });
});

// 生成文本框的代码正常写，只要记得加统一类名就行
$('#btnASizeR').click(function () {
    var i = $("#WireDimTbl tbody>tr").length + 1;
    var newInput = $('<input type="text" id="wireDim_' + i + '" class="wire-dim-input">');
    $('#WireDimTbl tbody').append(`<tr><td>${newInput[0].outerHTML}</td></tr>`);
});

如果你用了表单验证插件（比如jQuery Validate） #

要是你用了专门的表单验证插件，那得用插件提供的动态添加规则的方法，比如这样：

// 假设已经初始化了表单的验证规则
$('#btnASizeR').click(function () {
    var i = $("#WireDimTbl tbody>tr").length + 1;
    // 注意要给输入框加name属性，插件需要这个
    var newInput = $('<input type="text" id="wireDim_' + i + '" name="wireDim_' + i + '" class="wire-dim-input">');
    $('#WireDimTbl tbody').append(`<tr><td>${newInput[0].outerHTML}</td></tr>`);
    
    // 给新输入框添加验证规则
    newInput.rules('add', {
        number: true,
        messages: {
            number: '请输入有效的数字或小数哦'
        }
    });
});

你可以根据自己的实际代码情况选一个方案试试，应该就能解决验证失效的问题啦！

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