javascript - 验证动态输入字段 Jquery
问题描述
我正在向 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,
}
}
});
});
});
任何建议表示赞赏。
解决方案
为输入添加了类
<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>
推荐阅读
- react-native - 创建 React Native Github 存储库
- ms-access - MS 访问搜索按钮条件导致运行时错误 3075 额外
- jenkins - 我们可以将普通的 results.log 文件转换为 xunit 或 allure xml 格式吗?
- python - ImportError:没有名为 playsound 的模块
- excel - VBA - 在数据间隙之间插入合并行
- android - 在启动活动中加载数据并将该数据或 ViewModel 共享到 MVVM 中的下一个活动
- linux - 如何确定 ls 命令输出是文件还是目录 Bash
- python - Pyomo 的线性代数
- sql - Paginate grouped query results with limit per page
- authentication - 我的身份验证问题是否与双跳问题有关?