javascript - 使用 jquery 检查 div 中的所有值是否唯一

Question

我有一个选择框，没有选择会在 div 中生成多个文本框。现在有三个字段

显示名称[]、用户名[]和用户密码[]

其代码是:

<select name="license" id="dropdown" class="form-control" required="required">                                                 
  <option  value="default" >Select</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>

<script type="text/javascript">
    $(document).ready(function() {
        $("#dropdown").change(function() {
            var selVal = $(this).val();
            $("#pttuserdiv").html('');
            if(selVal > 0) {
                for(var i = 1; i<= selVal; i++) {
                    $("#pttuserdiv").append(`
                    <div class="col-sm-3 col-sm-offset-1">
                        <div class="form-group label-floating">
                            <label class="control-label">Display Name</label>
                            <input type="text" class="form-control" name="display_name[]" required >
                        </div>
                    </div>
                    <div class="col-sm-3 col-sm-offset-1">
                        <div class="form-group label-floating">
                            <label class="control-label">Username</label>
                            <input type="text" class="form-control validateLocation"  name="user_name[]" id="user_name" required >
                        </div>
                    </div> 
                    <div class="col-sm-3 col-sm-offset-1">
                        <div class="form-group label-floating">
                            <label class="control-label">Password</label>
                            <input type="password" class="form-control" name="user_password[]" required >
                        </div>
                    </div>`);
                }
            }
        });
    });
</script>

<div class="row">
<div id="pttuserdiv">

</div>
</div>

现在我希望 user_name[] 字段是唯一的。

我该怎么做？如果用户在 user_name[] 中再次输入相同的用户名，我想显示错误或警报。

Answer 1

尝试以下方法

• 绑定(bind) keyup 事件并检查当前输入框的用户input。
• 检查当前输入值是否与其他用户名值相同
• 如果是，则突出显示输入框。

演示

$(document).ready(function() {
  $("#dropdown").change(function() {
    var selVal = $(this).val();
    $("#pttuserdiv").html('');
    if (selVal > 0) {
      for (var i = 1; i <= selVal; i++) {
        $("#pttuserdiv").append('<div class="col-sm-3 col-sm-offset-1"><div class="form-group label-floating"><label class="control-label">Display Name</label><input type="text" class="form-control" name="display_name[]" required ></div></div><div class="col-sm-3 col-sm-offset-1"><div class="form-group label-floating"><label class="control-label">Username</label><input type="text" class="form-control validateLocation"  name="user_name[]" id="user_name" required ></div></div> <div class="col-sm-3 col-sm-offset-1"><div class="form-group label-floating"><label class="control-label">Password</label><input type="password" class="form-control" name="user_password[]" required ></div></div>');
      }
      $( "[name='user_name[]']" ).off( "keyup" );
      $( "[name='user_name[]']" ).on( "keyup", function(){
          var isFound = false;
          var value = $(this).val();
          $( "[name='user_name[]']" ).not(this).each( function(){
               if ( this.value == value )
               {
                   isFound = true;
               }
          });
          $(this).toggleClass( "highlight", isFound );
      });
    }
  });
});

.highlight
{
   border-color : red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="license" id="dropdown" class="form-control" required="required">                                                 
  <option  value="default" >Select</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>

<script type="text/javascript">
</script>

<div class="row">
  <div id="pttuserdiv">

  </div>
</div>

注意 - Id 在我的代码中不起任何作用，但最好保持所有元素的 id 唯一。