HTML js如何检查名称是否存在于列表中忽略大小写并停止表单提交答案

【问题标题】：HTML js how to check if name exists in list ignoring case and to stop form submissionHTML js如何检查名称是否存在于列表中忽略大小写并停止表单提交
【发布时间】：2021-12-09 15:44:42
【问题描述】：

我有一个带有用户名输入字段的表单，用于检查该字段是否为空并检查用户输入的内容是否存在于列表中。

这一半在消息无效时出现，但是如果用户输入列表中存在的名称，表单仍会提交，因为当字段为空白时表单不会提交（但这是由于需要输入标签存在）。

此外，如果用户输入的名称存在于列表中但大小写不同，则不会出现“名称已存在”消息，因为它与列表中名称的大小写不匹配。

请看我下面的代码：

<script>
function usernameFunction() {
  let x = document.getElementsByName("username")[0].value;
  let listNames = ["john", "sid", "paul", "jim"];

  let text;
  text = "";
  if (x === '' ||  x == null) {
    text = "Username cannot be blank";
  }
    for (let i = 0; i < listNames.length; i++) {
    if (listNames[i] === x) {
      text = ('The name already exists')
    }
  }

  document.getElementById("username_errors").innerHTML = text;
}
document.addEventListener('invalid', (function () {
  return function (e) {
    e.preventDefault();

    document.getElementsByName("username").focus();

  };
})(), true);
</script>

<form method="POST" action="">
<input type="text" name="username"  placeholder="username" name class="input_fields" required>
<div class="error-message" id="username_errors"></div>
      <input class="save_btn" type="submit" value="Save" name="save_username" onclick="usernameFunction()">
</form>

当名称存在于列表中并忽略大小写时，如何调整我的代码以停止提交表单？ - 例如 - 如果用户输入 John，john 在列表中，我希望消息“名称已存在”仍然出现并且不提交。

提前致谢

【问题讨论】：

x == null 并非每一个都为真，因为.value 将始终返回一个字符串（如果document.getElementsByName("username")[0] 存在）。

标签： javascript html

【解决方案1】：

这将是你的行：

 if ( listNames.includes(x.toLowerCase()) ) {
    return false;
  }

它检查值John 是否包含在名称数组中。并且字符串函数toLowerCase() 将名称变为小写。

更新

function usernameFunction(e) {
  e.preventDefault();
  
  let text = '';
  let x = document.getElementsByName("username")[0].value;
  let listNames = ["john", "sid", "paul", "jim"];
  if ( listNames.includes(x.toLowerCase()) ) {
    text = x + ' allready taken.';    
  }
  if (x === '' ||  x == null) {
    text = "Username cannot be blank";
  }
  
  if (text.length > 0) {
    document.getElementById("username_errors").innerHTML = text;  
    return false;
  }
  // trigger Submit programmatically
  document.getElementById("myForm").submit(); 
  console.log('trigger submit')  
}

document.addEventListener('invalid', (function () {
  return function (e) {
    e.preventDefault();

    document.getElementsByName("username").focus();

  };
})(), true);

<form method="POST" id="myForm">
<input type="text" name="username" value="John" placeholder="username" name class="input_fields" required>
<div class="error-message" id="username_errors"></div>
<button class="save_btn" onclick="usernameFunction(event)">SUBMIT</button>
</form>

【讨论】：

谢谢你，现在忽略大小写有效 - 但是当弹出消息出现名称存在并且我点击确定时，似乎表单仍在提交有没有办法像输入所需的标签一样停止这种情况当输入字段为空白时会做什么？
@Jimmy 是的。我修改了我的答案。它发送表单的原因是输入提交字段。我已将其替换为一个按钮，并在满足所有条件时以编程方式提交表单。
谢谢你这么多我想要的作品 - 希望我能够将它用于其他领域并适应。非常感谢！

【解决方案2】：

您可以为此使用toUpperCase()。

if (listNames[i].toUpperCase() === x.toUpperCase())
 {
  text = ('The name already exists')
}

【讨论】：