文本字段的嚴格驗證

Question

在我的表格上有兩個字段天和月。

我想為此做簡單的驗證。 一旦用戶輸入月份，即 12，那么只有 go 才能進入下一個字段。

如果用戶輸入無效的月份，那么它應該再次關注月份字段並且應該選擇之前輸入的文本。

我正在嘗試使用.focus()和.select() jQuery function 但它不起作用

這是虛構的驗證只是為了測試，它可以是任何數字或任何 label。

這是jSFiddle 鏈接。

<input type="text" id="days" /> <input type="text" id="month" />

jQuery("#days").blur(function(){
    if(jQuery(this).val() == "12"){
        alert("valid");
    }
    else {
        alert("invalid");
        jQuery(this).focus().select();        
    } 
 });

Answer 1

有了這個 HTML

<label for="day">Day<input type="text" id="day" name="day"/></label>
<label for="month">Month<input type="text" id="month" name="month" maxlength=2/></label>

使用這個 JS

$('#day').live('keydown', function(e){
    keyCode = e.keyCode || e.which;
    if(keyCode == 9){
        if($(this).val()<1 || $(this).val()>32){
           e.preventDefault();
           $(this).trigger('select');
           console.log('error'); 
        }   
    }        
});
$('#month').live('keydown', function(e){
    keyCode = e.keyCode || e.which;
    if(keyCode == 9){
        if($(this).val()<1 || $(this).val()>12){
           e.preventDefault();
           $(this).trigger('select');
           console.log('error'); 
        }   
    }        
});

鏈接： http://jsfiddle.net/r6j7C/

Answer 2

模糊事件是否有可能通過您的代碼，然后通過關注導致模糊的原因來結束？ 如果代碼從jQuery("#days").blur更改為jQuery("#month").focus ，我可以讓代碼工作。

jQuery("#month").focus(function(){
                if(jQuery(this).val() == "12"){
                        alert("valid");
                }
                        else
                {
                        alert("invalid");
                        jQuery("#days").focus();                      
                }
});

Answer 3

.focus()和.select() （用於您需要的）不是 jQuery 函數，它們是簡單的 Javascript 函數。

嗯，實際上它們在 jQuery 中有一個含義，它們用於事件綁定（分別用於 onfocus 和 onselect）。

您可以通過以下方式簡單地調用它們：

 this.focus();
 this.select();

如果您需要“設置焦點在這個元素上”和“選擇這個元素的內容”功能（這是純 JS，而不是 jQuery）。

Answer 4

$(function({
$('#days').attr("disabled", true);
});
$("#months").blur(function(){
    if($(this).val()<1 || $(this).val()>12){
       $(this).val() = "error, invalid month";
       $(this).css('color', 'red');
       $(this).focus();
       $('#days').attr("disabled", true);
       return;
    } 
else
{
 $('#days').attr("disabled", false);
}  
    }        
});