如何使用jquery根据json文件验证表单字段？

我有一个表单，我只希望人们能够提交，如果它来自json文件中的值列表。Json文件将是{“1”、“2”、“3”、…}。我一直在尝试到处搜索，但我找不到这样的东西。我觉得这相对简单，但由于我是jquery/JS新手，从头开始构建有点棘手

如果有人有一个好的方向来指给我看，那将是非常有帮助的，或者是一些方便的好东西——甚至更好

现在我正试图从下面的代码中拼凑出一些代码，但它似乎不想这样做

<script>
  $.getJSON("countries.json", function(json) {
    $('#signup').on('submit', function(evt) {
        var user = $('#user').val(), error;
        if (!user)
            error = 'no username entered';
        else if (json.usernames.indexOf(user) != -1)
            error = 'username already taken';
    if (error) { evt.preventDefault(); alert(error); }
    });
});
  </script>


<form id='signup'>
    <label>Enter value here</label>
    <input type='text' id='user' />
    <input type='submit' value='submit' />
</form>

$.getJSON（“countries.json”，函数（json）{
$（“#注册”）。在（'submit'，函数（evt）上{
var user=$（'#user'）.val（），错误；
如果（！用户）
错误='未输入用户名'；
else if（json.usernames.indexOf（user）！=-1）
错误='用户名已被使用'；
如果（错误）{evt.preventDefault（）；警报（错误）；}
});
});
在此处输入值

---

谢谢！我还尝试使用Bootstrap预案，但它决定用我的Bootstrap 3 CSS文件分解：<

您可能想考虑使用jQuery验证并添加自定义验证器，其中验证器将执行您的ID/UrrNEX检查，如果成功允许表单提交，或者不另行提交。 在下面的示例中，“usersexitscheck”函数提供的自定义验证覆盖了您的Id检查，所需的验证确保输入值

$(document).ready(function(){
   $.validator.addMethod("userExistsCheck", 
                         function(value, element) {
                            // Your test on ids/username in here
                        }, 
                         "Can not submit as the user already exists."
  );

  $("#signup").validate({   
      rules: {
          user: { //where user is the id of the user input box.
              required: true,
              userExistsCheck: true
          }

      },
      messages: {
         user: {
               required: "* Required"
           }
       }    
   });

})

改编自本博客：

---

您可能需要引用描述解决方案的博客的实际文本；如果博客更改了其url或被删除，保持答案的一致性。@Brumcouse--谢谢--我已经重新努力，将我认为正确的方法包括在下面，并将其附加在下面--不过，它现在在firefox中并没有像预期的那样工作。谢谢