Question

我创建了一个函数来检查用户名是否已存在于数据列表中，但是即使用户名不在重复数据列表中，警报也会每次显示。

<form onsubmit="return validation()">
    <table>
            <tr>
                <td>Username:</td>
                <td><input type="text" id="user" name="user"></td>
                <datalist id="list">
                    <option value="Tilen">
                    <option value="Marko">
                    <option value="Teja">
                    <option value="Tisa">
                    <option value="Rok">
                    <option value="Luka">
                    <option value="Mojca">
                </datalist>
            </tr>
    </table>
</form>

<script>
   function validation(){
       var user = document.getElementById("user");
            if(user.value.length <= 20 && user.value.length >= 3){
            }
            else{
                alert("Username has to be between 3-20 characters.")
             }
            //duplication data list
            var user = document.getElementById("user");
            if(user.value == list.value){
            }
            else{
                alert("Username already exists.")
             }
   }
</script>

Answer 1

首先，我认为您没有正确绑定到数据列表上的输入。如果您只是将输入更改为以下形式，则实际上可以将数据列表用作输入的自动完成：

<input type="text" id="upor_ime" name="upor_ime" list="polje_imen">

如果其中有该值，那么他们从视觉角度选择不在列表中或不在列表中的值将变得更加明显。现在，当要在javascript中进行验证时，如果您仍然想将其验证的话，您将不得不将可能的名称列表分成一个数组，以便可以检查输入的字符串是否输入中存在的字符串数组。因为您正在尝试将字符串数组与字符串进行比较，所以在if语句中使用==运算符将不起作用。这是一个可能的解决方案：

<form onsubmit="return validacija()">
    <table>
            <tr>
                <td>Uporabniško ime:</td>
                <td><input type="text" id="upor_ime" name="upor_ime" list="polje_imen"></td>
                <datalist id="polje_imen"></datalist>
            </tr>
    </table>
</form>

<script>
  var names = ["Tilen", "Marko", "Teja", "Tisa", "Rok", "Luka", "Mojca"];
  var options = "";
  for (let name of names) {
    options += "<option value='" + name + "'>";
  }
    document.getElementById("polje_imen").innerHTML = options;
  function validacija(){
    var upor_ime = document.getElementById("upor_ime");
    if(upor_ime.value.length > 20 || upor_ime.value.length < 3){
      alert("Uporabniško ime mora imeti med 3-20 znakov.")
      return;
    }

    //duplication data list
    var polje_imen = document.getElementById("polje_imen");
    if(names.includes(upor_ime.value)) {
      alert("Uporabniško ime že obstaja.");
      return;
    } else{
      // success        
    }
  }
</script>

这是一个JSFiddle：http://jsfiddle.net/4f1hztr2/

编辑：我还更改了一些if语句逻辑，以便如果项目的长度不合适，则不会继续执行其余代码。

Answer 2

您可以使用options获取所有querySelector，对其进行迭代，然后与user.value进行比较。另外，您需要在list="polje_imen"元素中添加input。

function validacija() {

  let user = document.getElementById('user');
  let listOptions = document.querySelectorAll("#list option");


  if (user.value.length <= 20 && user.value.length >= 3) {} else {
    alert("Username has to be between 3-20 characters.")
  }


  for (let i = 0; i < listOptions.length; i++) {
    if (listOptions[i].value === user.value) {
      alert('The name already exist')
    }
  }
  return false;
}

<form onsubmit="return validacija()">
  <table>
    <tr>
      <td>Username:</td>
      <td><input type="text" id="user" name="user" list="list"></td>
      <datalist id="list">
                    <option value="Tilen">
                    <option value="Marko">
                    <option value="Teja">
                    <option value="Tisa">
                    <option value="Rok">
                    <option value="Luka">
                    <option value="Mojca">
                </datalist>
    </tr>
  </table>
</form>

编辑：如果您不想显示数据列表，只需使用javascript。

function validacija() {

  let user = document.getElementById('user');
  let listNames = ["Tilen","Marko","Teja","Tisa","Rok","Luka","Mojca"];


  if (user.value.length <= 20 && user.value.length >= 3) {} else {
    alert("Username has to be between 3-20 characters.")
  }


  for (let i = 0; i < listNames.length; i++) {
    if (listNames[i] === user.value) {
      alert('The name already exist')
    }
  }
  return false;
}

<form onsubmit="return validacija()">
  <table>
    <tr>
      <td>Username:</td>
      <td><input type="text" id="user" name="user"></td>
    </tr>
  </table>
</form>

Javascript检查用户名是否已经存在（重复）

2 个答案: