2

次の条件でテキストボックスの値を検証しています

  1. 3文字以上である必要があります

  2. アルファベットのみを含める必要があります

  3. 少なくとも1つの母音が含まれている必要があります

すべての条件が一致した場合、送信ボタンを有効にします。上記のケースのいずれかが一致しない場合は、エラーメッセージをdivという名前のエラーに設定しています。

これが私のコードです

$document.ready(function(){

 $('.tbox').focus(); // cursor in text box 
 $(':submit').attr("disabled",true); // disable generate button

    $('.tbox').focus(fucntion(){

        check_the_input()   
    }); 


    });

function check_the_input()
{

    var value = $(this).val();

    $('.tbox').bind('keyup blur',function(){ 
    $(this).val( $(this).val().replace(/[^a-z]/g,'') ); }

    if(value.length > 3)
    {
        if(value.indexOf('a') == -1 && value.indexOf('e') == -1 && value.indexOf('i') == -1 && value.indexOf('o') == -1 && value.indexOf('u') == -1)
        {
            $('#error').text("*Input must contain atleast one vowel");
            $(':submit').attr("disabled",true); 

        }
        else
        {
            $(':submit').attr("disabled",false);
        }

    }
    else
    {
        $('#error').text("*Input should be atleast 3 characters")
        $(':submit').attr("disabled",true); 
    }


    setTimeout(check_the_input,100);
}

私はここで次の問題に直面しています：

  1. inputをaa99と入力すると、入力はaaに変わりますが、生成されたボタンは有効になります。

  2. テキストを入力したときにエラーが発生しません。タブを押すか、テキストボックスの外側でマウスをクリックした後でのみ、エラーが発生します。

4

2 に答える 2

2

アプローチを再考することをお勧めします。この簡単な例を考えてみましょう。

HTML：

<form>
  <input type="text" id="myinput"/>
  <button id="submit" type="submit" disabled>Submit</button>
  <p class="error"></p>
</form>

jQuery：

関数testとオブジェクトを使用して検証フィルターを格納することにより、コードがより明確になり、よりエレガントになり、パフォーマンスが向上し、新しいフィルターや入力を追加するなどの保守が容易になります。

デモ： http： //jsbin.com/ezatap/6/edit

var $input = $('#myinput');
var $error = $('.error');
var $submit = $('#submit');
var Filters = {
  min: {
    re: /.{3,}/,
    error: 'Must be at least 3 characters.'
  },
  char: {
    re: /^[a-z]+$/i,
    error: 'Must be only letters.'
  },
  vowel: {
    re: /[aeiou]/i,
    error: 'Must have at least one vowel.'
  }
};

function test(value, filters) {
  var isValid = false;
  for (var i in filters) {
    isValid = filters[i].re.test(value);
    $error.hide();
    $submit.prop('disabled', false);
    if (!isValid) {
      $error.show().text(filters[i].error);
      $submit.prop('disabled', true);
      break;
    }
  }
  return isValid;
}

test($input.val(), Filters);
$input.on('keyup blur', function() {
  test(this.value, Filters);
});
于 2012-09-15T06:44:34.240 に答える
1

最初の質問へ：

else
{
    $('#error').text("*Input should be atleast 3 characters")
}

=>

else
{
    $('#error').text("*Input should be atleast 3 characters");
    $(':submit').attr("disabled",true); 
}

2番目の質問へ：

入力が編集されているとき、入力がフォーカスを失うまでコールバックは呼び出されません。編集時に：submitのスタイルを変更したい場合は、数ミリ秒ごとに入力をチェックする定期的に呼び出される関数を設定できます。簡単な例を次に示します。

function check_the_input( )
{
   //routines check the input
   //...

   setTimeout( check_the_input, 100 ); //call me after 0.1 second
}

$(document).ready( function( ) { check_the_input( ) } );

もちろん、より高い効率が必要な場合は、さらに多くの作業を行う必要があります。

いくつかのエラーを修正します。これを参照してください：http：//jsfiddle.net/4E7vv/2/

于 2012-09-15T06:05:13.553 に答える