前端input输入框禁止重复

前端中，如果你想限制`<input>`类型的输入框不允许用户重复输入已存在的值，通常有两种常见方法：

1. **HTML5属性结合JavaScript**:
- 使用`pattern`属性配合正则表达式验证，设置`pattern="[独一无二的值]"`，如果用户输入的值不符合设定的模式，则会显示错误提示。
- JavaScript可以监听`input`事件，在用户提交前检查当前输入是否已存在数据库或已有元素中。

<input type="text" id="uniqueInput" pattern="^(独特值)$" oninput="checkUnique(this)">
<script>
function checkUnique(input) {
  // 检查input值是否唯一并阻止提交
  if (/* 判断条件 */) {
    input.setCustomValidity('该值已存在，请输入其他值');
  } else {
    input.setCustomValidity('');
  }
}
</script>

2. **后端校验**:
如果允许的话，可以在表单提交到服务器之前进行数据验证。比如使用Ajax发送请求到服务器，验证输入值是否已存在。

防止重复输入的同时，用户体验也非常重要，你可以提供实时反馈，让用户立即知道他们是否输入了重复的值。