jquery中的文本框validation

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

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(/[^az]/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. 如果我输入aa99输入，则输入变为aa，但仍然会启用生成的按钮。

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

Answer 1

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

HTML：

 
  Submit 
  

jQuery的：

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

演示： 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: /^[az]+$/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); }); 

Answer 2

对第一个问题：

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

=>

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

对第二个问题：

在编辑输入时，在输入失去焦点之前不会调用任何回调。 如果你想改变编辑时提交的样式，你可以设置一个周期性调用的函数，每隔几毫秒检查一次输入。 这是一个简单的例子：

 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/