Question

我正在寻找一种解决方案来验证文本字段的输入，该数据是由json文件提供的。例如：要在注册表单中查看是否已存在所需的用户名。

有人可以帮忙解决一个有效的示例，插件，脚本或教程吗？

'usernames.json'看起来像这样......

{"usernames":["carl","jack","jill"]}

...并以...读出

$.getJSON("usernames.json", function(names) {
var invalidName = names;

我会继续......

jQuery.validator.addMethod

......但是从现在开始，我被困住了。

如果有人可以提供一个有效的例子，我会很高兴的！

/////////////////////////////////////////////// /////

编辑：感谢Utkanos和Pavel Staseljun，我可以找出以下解决方案，这只是经过粗略测试！请在下面找到Utkanos的例子，因为这个包括“keyup” - 处理而不是“提交”，并且不包括“必需” - 检查。 “#errorresponse”是div，可能会显示错误消息。

$.ajax({
  url: "http://yoururlto.json?callback=?",
  dataType:"jsonp",
  jsonpCallback: '?',
  async: false,
  success: function(json) {
        $('#user').keyup(function(evt) {
        var jsonarray = json.usernames;
        var userinput = $('#user').val().toLowerCase()
        var check = $.inArray(userinput, jsonarray);
        if (check !== -1) {
            $("#errorresponse").text('Thanks to Utkanos and Pavel Staseljun!');
            }
        })
      }
});

Answer 1

HTML

<form id='signup'>
    <label>Choose a username</label>
    <input type='text' id='user' />
    <input type='submit' value='submit' />
</form>

JS / jQuery

$.getJSON("usernames.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); }
    });
});

Answer 2

为什么要将所有用户名从服务器发送到客户端？这听起来是一个非常糟糕的主意。请执行类似服务器端功能的操作，检查发布的用户名并返回true或false表示有效或无效？

Answer 3

无法创建一个检查用户名是否存在的ajax脚本

更好的imo，因为你可以使用远程选项直接将它与jquery验证器集成。

针对json / array的jQuery文本字段验证

3 个答案: