Django中如何将HTML表单输入值与列表内元素进行比对？

前置代码修正 #

先修复你提供的HTML代码的两处问题：

• input标签缺少和label关联的id="name"属性
• placeholder属性缺少闭合的双引号
  修正后的HTML代码如下：

<form action="#" class="signin-form">
     <div class="form-group mb-3">
          <label class="label" for="name">Username</label>
          <input type="text" class="form-control" placeholder="Username required" id="name">
     </div>
     <div class="form-group">
          <button type="submit" class="form-control btn btn-primary submit">Sign In</button>
     </div>
</form>

校验逻辑实现（原生JS，无需第三方依赖） #

直接在页面中插入以下JS代码即可完成比对功能：

// 预定义用户名列表
const listA = ["abc", "def", "ghi"];
// 获取表单和输入框DOM元素
const signinForm = document.querySelector('.signin-form');
const usernameInput = document.getElementById('name');

// 监听表单提交事件
signinForm.addEventListener('submit', function(e) {
    // 阻止表单默认提交跳转行为
    e.preventDefault();
    // 获取输入值并去除首尾空白字符
    const inputUsername = usernameInput.value.trim();
    
    // 比对校验逻辑
    if (listA.includes(inputUsername)) {
        // 校验通过后的业务逻辑，比如提交表单、跳转到首页等
        alert('用户名校验通过，登录成功');
        // 如果需要真实提交表单，放开下一行注释即可
        // signinForm.submit();
    } else {
        // 校验不通过的提示逻辑
        alert('用户名不在允许列表中，请重新输入');
        // 清空输入框并自动聚焦方便用户重新输入
        usernameInput.value = '';
        usernameInput.focus();
    }
})

可选配置 #

• 如果你需要忽略大小写比对，可以把判断条件改为 listA.map(item => item.toLowerCase()).includes(inputUsername.toLowerCase())
• 提示内容可以替换为自定义的页面UI提示，无需使用默认的alert弹窗

内容的提问来源于stack exchange，提问作者Arya Shesham