jquery中的文本框验证

Textbox validation in jquery

本文关键字：验证 文本 jquery      更新时间：2023-09-26

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

  1. 至少应为3个字符

  2. 它应该只包含字母

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

如果所有条件都匹配，我将启用提交按钮。如果以上任何一种情况都不匹配，我会将一条错误消息设置为div named error。

这是我的代码

$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. 我打字的时候没有收到错误。只有在按下选项卡或在文本框外单击鼠标后，我才会出现错误。

我建议重新思考这种方法。考虑这个更简单的例子：

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

对于第一个问题：

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/

相关文章：