jquery中的文本框验证 [英] Textbox validation in jquery

问题描述

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

i am validating the text box value on following conditions

1. 它至少应为3个字符

1. It should be minimum of 3 characters

它应该只包含字母

它应该至少包含一个元音

It should contain at least one vowel

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

If all the conditions get matches I am enabling the submit button. If any of the above case are not matched I am setting an error message to 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);
}

我在这里遇到以下问题：

I am facing following issues here:

1. 如果我输入aa99输入，则输入变为aa，但仍然会启用生成的按钮。

1. If I type input as aa99 the input changes to aa , but still the generated button is enabled.

我输入文本时没有收到错误。只有在按Tab键或在文本框外单击鼠标后才会出现错误。

I am not getting the error at the time I type the text. Only after pressing tab or clicking mouse outside the textbox I am getting error.

推荐答案

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

I would suggest rethinking the approach. Consider this simpler example:

HTML：

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

jQuery：

通过使用函数 test 和一个存储验证过滤器的对象，您的代码变得更加明显，更加优雅，并且您可以获得更好的性能，并且更容易维护，例如添加新过滤器或更多输入。

By using a function test and an object to store your validation filters your code becomes more obvious, more elegant and you get better performance and it's easier to maintain for example to add new filters or more inputs.

演示： 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);
});

这篇关于jquery中的文本框验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！