通過onkeyup事件Jquery進行文本框驗證，而不使用警報

我在我的html頁面中有以下文本框。通過onkeyup事件Jquery進行文本框驗證，而不使用警報

我到目前爲止使用的代碼是。

<input type="text" id = "points" onkeyup="Validate()"> 
function Validate(){ 


var text_value = document.getElementById("points").value; 
alert(text_value); 

    if (!text_value.match(/^[56789]$/) && document.getElementById(called_id).value !="") 
    { 
     document.getElementById("points").value=""; 
     // document.getElementById("points").focus(); 
     alert("Please Enter only between 5 and 10 "); 
    } 

}

接受的值是5,6,7,8,9和10。我發現基於onkeyup事件的方式只接受5,6,7,8和9 ..我想知道如何在其中包含10。另外我想知道onkeyup事件驗證相同使用jquery。

如果用戶給出的任何其他值除了這些，它應該被賦予文本框右側的「值應該在5和10之間」（不作爲警報）。
如果第一次輸入的值是1，它應該等待下一個鍵被按下。如果它是0，則接受它，或者像前面的情況一樣提出相同的錯誤消息。

來源

2013-07-19 Nishanth Lawrence

這不是您聘請開發人員爲您工作的網站（因爲您不支付任何人）。這是一個幫助您使用代碼的社區。我們不會構建完整的代碼供您使用。請更新您的帖子並向我們展示您嘗試過的內容。 – Shawn31313

我一直使用警報，併爲5至9。我需要其餘的那些幫助爲什麼我問 –

在這裏發佈您的代碼plz –

Working Jsfiddle

我寧願沒有正則表達式：

function validate() { 
    var num = document.getElementById("points2").value; 
    var num = parseInt(num, 10); 
    alert(num); 
    if (num < 5 || num > 10) { 
     document.getElementById("points2").value = ""; 
     alert("Please Enter only between 5 and 10 "); 
    } 
}

改變你的正則表達式：

/^([5-9]|10)$/

你應該使用onchange事件：

<input type="text" id = "points" onchange="Validate()"> 

function Validate(){  
var text_value = document.getElementById("points").value; 
alert(text_value); 

    if (!text_value.match(/^([5-9]|10)$/) && document.getElementById(called_id).value !="") 
    { 
     document.getElementById("points").value=""; 
     // document.getElementById("points").focus(); 
     alert("Please Enter only between 5 and 10 "); 
    } 

}

來源

2013-07-19 07:12:51

謝謝，但它不可能與onkeyup，因爲我想要做的改變而不把焦點移到另一個元素。 –

$('#textbox').keyup(function() { 
    var value = $('#textbox').val(); 
    if(value != ''){ 
     if(!value.match(/^[5678910]$/)) 
      textboxError(); 
     else{ 
      var length = value.length; 
      if(value.charAt(length-1) == 0 && value.charAt(length-2) != 1) 
       textboxError(); 
     } 
    } 
}; 

$('#textbox').change(function() { 
    var value = $('#textbox').val(); 
    if(value != '') 
     textboxError(); 
    } 
}; 

function textboxError(){ 
    $('#textbox').val(''); 
    $('#textbox').focus(); 
    alert("Please Enter only between 5 and 10 "); 
}

我們是做什麼的，

檢查是否爲空值（如果爲空不執行任何操作）
如果不是空的檢查值匹配定義設置
如果它匹配，現在我們檢查10.我們所做的是，如果最後輸入的項目是0，比前一個字段必須是1，所以它成爲10.如果不是，我們會拋出錯誤。
但是，這是一個問題，用戶可能輸入1並離開該字段而不輸入另一個字符。所以，你可以通過onchange字段來擴展它。
Onchange，現在我們檢查計數爲1，並且應該匹配計數爲10.它修復了我們的問題。您不必擔心0，因爲我們已經在密鑰塊中檢查了它。

我沒有檢查代碼。所以如果有任何錯別字或錯誤，你可以替換它們。

來源

2013-07-19 07:51:00

我以前有過類似的正則表達式，但是這也允許0。 –

正如Zaheer Ahmed所述，/^([5-9]|10)$/也將趕上10。對於事件監聽器，你可以使用

$('#textbox')[0].addEventListener('input', function(event) { 
    var value = $(event.target).val(); 
    // we already have a reference to the element through the event object, 
    // crawling the DOM again is expensive. 

    if(value != '') textboxError(); 
});

這繞過了jQuery，它可以在被一些人皺起了眉頭，但「輸入」事件立即觸發並且如果該文本在粘貼或通過其他方法進入工程。

來源

2016-02-15 04:42:49

通過onkeyup事件Jquery進行文本框驗證，而不使用警報

回答

相關問題