SOURCE

const input1 = document.querySelector('.input1') 
const input2 = document.querySelector('.input2') 
const input3 = document.querySelector('.input3')
const warning = document.querySelector('.warning')

const data = [
      {value: null},
      {value: null},
      {value: null}
]

// console.log(input1, input2)
input1.addEventListener('input', function(e) {
  const value = e.target.value 
  console.log(e)
  if(validateLength(value)){
     data[0].value = value 
     validateSame(value, 0)
  } 
})

input2.addEventListener('input', function(e) {
  const value = e.target.value 
  if(validateLength(value)){
     data[1].value = value 
     validateSame(value, 1)
  } 
})

input3.addEventListener('input', function(e) {
  const value = e.target.value 
  if(validateLength(value)){
     data[2].value = value 
     validateSame(value, 2)
  } 
})


function updateWarning(msg) {
  warning.innerHTML = msg
}
function validateSame(value, num){
  for(let i =0; i<data.length; i++){
    if(i !== num && data[i].value === value) {
      updateWarning(`当前输入框,与第${i+1}输入重复`)
      return true
    }
  }
}
function validateLength(value, dom) {
  value = '' + value
  console.log(value)
  if (value && value.length >= 3) {
    updateWarning('长度最大为3')
  } else {
    updateWarning('')
  }
  return true
}

<div class="wrapper" id="app">
  <div class="input-box">
    <input type="text" class="input1 input" maxLength=3/>
  </div>
  <div class="input-box">
    <input type="text" class="input2 input" maxLength=3/>
  </div>
  <div class="input-box">
    <input type="text" class="input3 input" maxLength=3 />
  </div>
  
  <div class="warning">--</div>
  
</div>

.wrapper {
  .warning {
    margin-top: 20px;
    color: red;
  }
}