如何动态限制<input='number'/>字段中循环随机值中<input='text'/>的重复值

Question

$('#inputqty').on('change keyup',function(){
let inputs='';
let value = parseInt($(this).val());
if (0<value) {
for (let i = 0; i<value; i++) {
inputs+=`<div style="margin-left: 10px; margin-top: 10px;">
<input autocomlete="off" type="text" style="margin-bottom:5px;margin-top:5px; margin-left:10px;"  name="item_serial" id="serial_number" placeholder=" Serial Number. item:${i+1}" tabindex="${i+6+1}" required /></br>
</div>`
}
}
else{
inputs+=`<center>No item Quantity inputted!!!<center>`
}
$('#contentforserial').html(inputs);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" min="1" max="10"id="inputqty" name="inputqty">
<div style="height: 190px;width:260px;padding:3px; background:greenyellow;" id="containerforserial">
<div>Enter Serial Number of Item:</div>
<div class="contentforserial" id="contentforserial" style="  height:150px;overflow:auto;background:#fff;">
<div id="demo"></div>
</div>
</div>

Answer 1

您可以创建一个函数来检查重复值，然后在输入中添加 onchange 事件调用到此函数

例

function checkForDuplicates() {      
var valuesAlreadySeen = []
$(".serial_number").each(function() {
if($(this).val() != ""){
if (valuesAlreadySeen.indexOf( $(this).val() ) !== -1) {
/* do some thing here */
alert( $(this).val()+' already input' );

/* clear this input */
$(this).val("");
}else{
valuesAlreadySeen.push( $(this).val() );
}
}        
});

}

然后将类和更改事件添加到您的输入中

<input class="serial_number" onchange="checkForDuplicates()" />

因此，您的最终代码应该是

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" min="1" max="10"id="inputqty" name="inputqty">

<div style="height: 190px;width:260px;padding:3px; background:greenyellow;" id="containerforserial">
<div>Enter Serial Number of Item:</div>
<div class="contentforserial" id="contentforserial" style="  height:150px;overflow:auto;background:#fff;">
<div id="demo"></div>
</div>
</div>

<script>
$(document).ready(function(){
$('#inputqty').on('change keyup',function(){
let inputs='';
let value = parseInt($(this).val());
if (0<value) {
for (let i = 0; i<value; i++) {
inputs+=`<div style="margin-left: 10px; margin-top: 10px;">
<input class="serial_number" onchange="checkForDuplicates()" autocomlete="off" type="text" style="margin-bottom:5px;margin-top:5px; margin-left:10px;"  name="item_serial[]" placeholder=" Serial Number. item:${i+1}" tabindex="${i+6+1}" required /></br>
</div>`
}
}
else{
inputs+=`<center>No item Quantity inputted!!!<center>`
}
$('#contentforserial').html(inputs);
});
});

function checkForDuplicates() {

var valuesAlreadySeen = []
$(".serial_number").each(function() {
if($(this).val() != ""){
if (valuesAlreadySeen.indexOf( $(this).val() ) !== -1) {
/* do some thing here */
alert( $(this).val()+' already input' );
$(this).val("");/* clear this input */
}else{
valuesAlreadySeen.push( $(this).val() );
}
}        
});

}
</script>

Answer 2

创建一个将用作数据库来存储输入值的object。循环遍历输入元素并将值存储为object中的键，将数组存储为键。推送数组中的输入元素。 然后遍历object值(输入元素数组)，如果数组包含多个输入元素，这意味着这些输入元素具有重复值，请对它们执行任何操作：

const myInputs = document.getElementById("myinputs");
document.getElementById("inputqty").addEventListener("input", onInput);
onInput.bind(document.getElementById("inputqty"))();
function onInput(e)
{
const value = Math.max(~~this.value, 0);
// show/hide message
noinputs.classList.toggle("hidden", value > 0);
let i = 1;
//create new inputs
while(myInputs.children.length < value)
{
const input = document.createElement("input");
input.className = "serial_number";
input.id = `serial_number${i}`;
input.name = "item_serial[]";
input.placeholder = `Serial Number. item:${i}`;
input.tabIndex = `${i+6}`;
input.autocomplete = "off";
input.required = true;
input.addEventListener("input", checkInputs);
myInputs.appendChild(input);
i++;
}
//remove excess inputs
while(myInputs.children.length > value)
myInputs.removeChild(myInputs.lastChild);
//make sure we check for duplcates again in case inputs were removed
checkInputs();
};
function checkInputs(e)
{
//generate list of values from all inputs
const values = {};
for(let i = 0; i < myInputs.children.length; i++)
{
const value = myInputs.children[i].value.trim();
if (!values[value])
values[value] = [];
values[value].push(i);
}
//check if multiple inputs have the same value
for(let value in values)
{
const inputs = values[value];
for(let i = 0, count = inputs.length; i < count; i++)
{
const input = myInputs.children[inputs[i]];
input.classList.toggle("error", value !== "" && count > 1);
}
}
}

.error
{
background-color: red;
}
#myinputs > input
{
margin-bottom:5px;
margin-top:5px;
margin-left:10px;
}
#noinputs.hidden
{
display: none;
}
#containerforserial
{
height: 190px;
width:260px;
padding:3px;
background:greenyellow;
}
#contentforserial
{
height:150px;
overflow:auto;
background:#fff;
}

<input type="number" min="1" max="10" id="inputqty" name="inputqty" value="1">
<div id="containerforserial">
<div>Enter Serial Number of Item:</div>
<div class="contentforserial" id="contentforserial">
<div id="myinputs"></div>
<center id="noinputs">No item Quantity inputted!!!</center>
<div id="demo"></div>
</div>
</div>

并且请避免使用英国媒体报道软件 jquery 和内联样式。

Answer 3

在循环中的输入文本中添加类名，然后

var array = $('.className').map(function(){
return $(this).val()
}).get();

此数组将为您提供输入字段的值，您可以对其进行验证，并使用数组的索引将验证错误消息添加到相关输入字段中。