2

我在以下条件下验证文本框值

  1. 至少应为 3 个字符

  2. 它应该只包含字母

  3. 它应该至少包含一个元音

如果所有条件都匹配，我将启用提交按钮。如果上述任何一种情况不匹配，我将向名为错误的 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. 我在输入文本时没有收到错误消息。只有在文本框外按 Tab 或单击鼠标后，我才会收到错误消息。

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); 
}

对于第二个问题：

当输入被编辑时，在输入失去焦点之前不会调用回调。如果您想在编辑时更改 :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 回答