jquery文本框驗證

Question

嗨我有一個文本框沒有行動按鈕。在打字時，它必須驗證它是否從A到Z，否則它會在文本框旁邊引發錯誤。我怎樣才能做到這一點？

Answer 1

這可能會爲你工作：

<input type="text" class="abc"> 

也許你已經做調整正則表達式，還沒有真正測試過它：

$(document).ready(function() { 
$('.abc').bind('keyup', function() { 
    regex = /^[A-z0-9]+$/; 
    if(!regex.test($(this).val())) { 
     $(this).next('.error').remove(); 
     $(this).after('<div class="error">Wrong</div>'); 
    } else { 
     $(this).next('.error').remove();    
    } 
}); 
}); 

小提琴：http://jsfiddle.net/EB6ET/2/

Answer 2

在這裏你去！ 我已經讓它變得更簡單，讓人們可以理解的基本邏輯的吧:)

，這裏是我的jsfiddle ..

http://jsfiddle.net/joedf/mhVqr/2/

的Html

<input type='text' id='textbox'> 
<input type="button" class="button-disabled" id="change" disabled="disabled" value="click"> 
<div id="throwEx"/> 

JS

$("#throwEx").hide(); 
$("#textbox").keyup(checkForm).focus(checkForm); 

function checkForm() { 
    var needle = /^([a-zA-Z0-9]+)$/; 
    var inputVal = $("#textbox").val(); 

    if (inputVal == '') { 
     $("#change").addClass("button-disabled").removeClass("button"); 
     $("#change").attr("disabled", "disabled"); 
     $("#throwEx").hide(); 
    } 
    else if (!needle.test(inputVal)) { 
     $("#change").addClass("button-disabled").removeClass("button"); 
     $("#change").attr("disabled", "disabled"); 
     $("#throwEx").text("Error: Only Alphanumeric characters are allowed..."); 
     $("#throwEx").show(); 
    } else { 
     $("#change").removeClass("button-disabled").addClass("button"); 
     $("#change").removeAttr("disabled"); 
     $("#throwEx").hide(); 
    } 
} 

Answer 3

我從stackoverflow得到了這個here並已修改，只能輸入字符A到Z。

<input type="text"/> 

$(document).ready(function() { 

$('input').keyup(function() { 
    var $th = $(this); 
    $th.val($th.val().replace(/[^a-z]/g, function(str) { alert('You typed " ' + str + ' ".\n\nPlease use only letters and numbers.'); return ''; })); 
}); 
}); 

鏈接擺弄here

Answer 4

控制使用KEYUP功能的文本框是一個壞主意，因爲用戶可以複製/粘貼文本的文本框內，或選擇瀏覽器的自動完成字段等的一個我做法：

LIVE JSFIDDLE

HTML：

<input type="text" id="TextBox1" name="TexBox1" value="" /> 
<span id='error' name='error'></span> 

個

JS：

function monitor() { 
    if ($('#TextBox1').val().length > 0) { 
     var reg = /^([a-zA-Z]+)$/; 
     if (!reg.test($('#TextBox1').val())) { 
      $('#error').html("Only letters are allowed!"); 
     } else { 
      $('#error').html(""); 
     } 
    } else { 
     $('#error').html(""); 
    } 
} 

var timer = ''; 

$('#TextBox1').on('focus', function() { 
    timer = setInterval(monitor, 100); 
}).on('blur', function() { 
    clearInterval(timer); 
});