Question

我当前的代码是这样的，并且是基于点击的，而不是基于输入的：

$(document).ready(function()
{

$('#btn_send').on('click', function() {

content_input_username = $('#input_username').val();

$.post('system/check_username.php',
        {
            'content_input_username':content_input_username
        },
        function(responseText)
        {
            if(responseText == 'false')
            {
                $('#username_info').html('username available');
            }

            if(responseText != 'false' && responseText != 'sql_error')
            {
                $('#username_info').html('user name not available');
            }



        }
    );

}); // /button-click

});

如何在输入过程中实现输入字段永久验证？我需要改变什么？

Answer 1

这里有两件事。

首先，您应该将click事件更改为输入或更改（稍后将详细介绍）事件。

由于您正在执行ajax请求，因此对于每个按键都不是理想的，因此“更改”是一个不错的选择，但是，只有当您失去对输入的关注时才会触发，这会让它变得很烦人。

'输入'救援。输入事件将在每次击键时触发，但是你必须考虑一些因为如果我输入“bart”它将会激活4个具有竞争条件的请求，这是非常糟糕的。您应该限制验证，以便在用户停止输入时执行请求，例如3秒。

另请注意，旧版浏览器不提供“输入”，但您也可以为旧版浏览器添加更改，例如：.on('change input')

notes on: keyup即使您使用光标向右移动或用相同的字母替换字母，此事件也会触发，而输入只会在输入发生变化时触发。所以我会远离keyup事件。

Answer 2

这基本上是Bart的解决方案（go upvote！）。我希望OP有一个完整的代码示例，并将注意力从keyup事件上移开，我们都认为这是错误的方法。

function debounce(fn, delay) {
  var timer = null;
  return function () {
    var context = this, args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function () {
      fn.apply(context, args);
    }, delay);
  };
}

$(document).ready(function() {
    $('#input_username').on('change input', debounce(function() {
        content_input_username = $('#input_username').val();

        $.post('system/check_username.php',
            {
                'content_input_username':content_input_username
            },
            function(responseText)
            {
                if(responseText == 'false')
                {
                    $('#username_info').html('username available');
                }

                if(responseText != 'false' && responseText != 'sql_error')
                {
                    $('#username_info').html('user name not available');
                }



            }
        );

    }, 250));
});

Here是我使用“更改输入”的来源。

Answer 3

您可以使用keyup事件处理程序

$('#input_username').on("keyup", function(){
    //do your validation here.
    content_input_username = $('#input_username').val();

    $.post('system/check_username.php',
    {
        'content_input_username':content_input_username
    },
    function(responseText)
    {
        if(responseText == 'false')
        {
            $('#username_info').html('username available');
        }

        if(responseText != 'false' && responseText != 'sql_error')
        {
            $('#username_info').html('user name not available');
        }

    });
});

Answer 4

<input type="text" onkeypress="validate()">

$(document).ready(function()
{

function validate() {

content_input_username = $('#input_username').val();

$.post('system/check_username.php',
        {
            'content_input_username':content_input_username
        },
        function(responseText)
        {
            if(responseText == 'false')
            {
                $('#username_info').html('username available');
            }

            if(responseText != 'false' && responseText != 'sql_error')
            {
                $('#username_info').html('user name not available');
            }



        }
    );

}

});

jQuery：如何在键入期间验证输入字段？

4 个答案: