代码之家 › 专栏 › 技术社区 › TheOrdinaryGeek

验证动态输入字段Jquery

html jquery javascript

TheOrdinaryGeek · 技术社区 · 7 年前

我正在向web表单添加动态输入字段。我用这个来验证这些 Jquery Mask 插件。

它在初始输入上运行良好,但在动态添加的输入上不起作用。

我的输入HTML是;

<input type="text" id="mac_address" name="MacAddress[]">

我的按钮HTML是;

<button class="add-mac" type="button" title="Add">Add</button>

用于验证输入的语法是(仅适用于第一个输入);

$('#mac_address').mask('ZZ-ZZ-ZZ-ZZ-ZZ-ZZ', {
    translation: {
        'Z': {
            pattern: /[A-Fa-f0-9]/,
            optional: false,
        }
    }
});

如何将此验证添加到动态输入?

我试着把代码添加到 each 循环,尽管它不起作用。

$('.add-mac').click(function() {
    $('#mac_address').each(function() {
        $(this).mask('ZZ-ZZ-ZZ-ZZ-ZZ-ZZ', {
            translation: {
                'Z': {
                    pattern: /[A-Fa-f0-9]/,
                    optional: false,
                }
            }
        });
    });
});

任何建议都很感激。

2 回复 | 直到 7 年前

vommer 7 年前

将类添加到输入

  <input type="text" class="mac_address" id="mac_address" name="MacAddress[]">
    <button class="add-mac" type="button" title="Add">Add</button>

    <script>
    var count = 1;
    $('.add-mac').click(function() {

     $('.mac_address').last().clone().attr('id', 'mac_address' + count).val('').insertBefore($(this));
    count ++; 
    });
    $(document).on('keyup', '.mac_address', function(){
      $('.mac_address').mask('ZZ-ZZ-ZZ-ZZ-ZZ-ZZ', {
        translation: {
            'Z': {
                pattern: /[A-Fa-f0-9]/,
                optional: false,
            }
        }
    });
    })
      $('.mac_address').mask('ZZ-ZZ-ZZ-ZZ-ZZ-ZZ', {
        translation: {
            'Z': {
                pattern: /[A-Fa-f0-9]/,
                optional: false,
            }
        }
    }); 
</script>

https://codepen.io/vommbat/pen/MBXeoj

Marin Vartan 7 年前

将id更改为类

<input type="text" class="mac_address" name="MacAddress[]">
<button class="add-mac" type="button" title="Add">Add</button>

<script>
$('.add-mac').click(function() {
    $('.mac_address').each(function() {
        $(this).mask('ZZ-ZZ-ZZ-ZZ-ZZ-ZZ', {
            translation: {
                'Z': {
                    pattern: /[A-Fa-f0-9]/,
                    optional: false,
                }
            }
        });
    });
});
</script>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

5 月前

Jamie · 在CSS链接的文件名中添加Jinja占位符

5 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

6 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

6 月前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

6 月前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

6 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

6 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

6 月前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

6 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

6 月前