0

入力フィールドの有効性をチェックする関数を作成しようとしていますが、入力が速すぎてタブを押すと、イベントが発生せず、フィールドが検証されないという問題が発生しています。 。キーアップ、キーダウン、ぼかし、フォーカス、フォーカスアウトのいくつかの組み合わせを試しましたが、何も機能しませんでした。

以前にぼかしを使用しましたが、ぼかしの問題は、メールアドレスの最後の入力で、メールから離れてボックスをぼかしてはいけないため、起動しないことです。

これは私が現在使用しているコードです。待つと動作しますが、「ジョン」と入力してすぐにタブを押すと、検証されません。

$(function()
{
    var timer;
    // First name
    $('input[name="firstName"]').on('keydown',function(event)
    {
            clearTimeout(timer);
            timer = setTimeout(function() 
            {
                validate(/^[A-Za-z]*$/, 'firstName', 'firstName')
            }, 800);
    });
    // Last name
    $('input[name="lastName"]').on('keydown',function(event){
            clearTimeout(timer);
            timer = setTimeout(function() 
            {
                validate(/^[A-Za-z]*$/, 'lastName', 'lastName')]
            }, 800);
    });
    // Email
    $('input[name="email"]').on('keydown',function(event){
            clearTimeout(timer);
            timer = setTimeout(function() 
            {
                validate(/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/, 'email', 'email')
            }, 800);
    });
}

私が何をすべきかについてのアイデアはありますか？

4

5 に答える 5

2

ぼかしですぐに関数を実行します。1つの方法は、setTimeoutで0を使用することです。これは、関数呼び出しに分割して関数を呼び出すためのより良い方法です。

$('input[name="firstName"]').on('keydown blur',function(event)
{
        clearTimeout(timer);
        timer = setTimeout(function() 
        {
            validate(/^[A-Za-z]*$/, 'firstName', 'firstName')
        }, event.type==="blur" ? 0 : 800 );
});
于 2013-01-09T22:05:04.500 に答える
1

他の人はすでに問題の解決策を与えていますが、これを自分で簡単にするわずかなリファクタリングがあります。すべてのイベントハンドラーが基本的に同じことをしているように見えるので、検証を分離して、すべての子入力に委任するフォームの単一のイベントハンドラーを使用するだけで、パフォーマンスも少し向上します（イベントハンドラーが少なくなります）。

var validations = {
  firstName: /^[A-Za-z]*$/,
  lastName: /^[A-Za-z]*$/, 
  email: ...
};

$('form').on('keypress input change blur', 'input[name]', function(event) {
  clearTimeout(timer);
  timer = setTimeout(function() {
    key = e.name;
    validate(validations[key], key, key);
  }, event.type in ['blur', 'input', 'change'] ? 0 : 800 );
});
于 2013-01-09T22:13:39.897 に答える
0

blurイベントのフィールドを検証することもできます。次のフィールドにタブで移動したときのように、フィールドがフォーカスを失ったときにぼかしが発生します。

多分次のように：

$('input[name="firstName"]').on('keydown',function(event)
{
        clearTimeout(timer);
        timer = setTimeout(function() 
        {
            validate(/^[A-Za-z]*$/, 'firstName', 'firstName')
        }, 800);
}).on('blur',function(event)
{
        clearTimeout(timer);
        validate(/^[A-Za-z]*$/, 'firstName', 'firstName');
});
于 2013-01-09T22:01:58.767 に答える
0

の代わりにkeyupまたはを使用します。 入力が実際にコントロールに到達する前に発生するため、値はまだ更新されていません。 値が入力された後、両方が起動します。keypresskeydownkeydownkeyupkeypress

inputさらに良いことに、バインドすることchangeもできます。これは、ユーザーがコピーアンドペーストまたはドラッグアンドドロップで入力を入力するときのベースをカバーします。

$('input[name="firstName"]').on('keypress input change', function(event)
{
    validate(/^[A-Za-z]*$/, 'firstName', 'firstName')
});
于 2013-01-09T22:04:34.343 に答える
0

これまでと同じようにぼかしで検証しますが、フォームの送信でもう一度検証して、最後のフィールドと、タブ移動が速すぎるために検証されなかったフィールドを取得するようにします。クライアント側で実行しているため、処理時間は最小限に抑えられます。

于 2013-01-09T22:08:57.407 に答える