如何防止用戶輸入小數？

我在我的網站上有一個訂單頁面。一些訂單商品可以有小數量，有些則不能。如何防止用戶輸入小數？

防止用戶輸入小數的最佳方法是什麼？（除了一個警告框並將字段設置爲零）？

2011-09-02 hawkeye

@brodie：雖然這不是JavaScript/HTML答案。 – animuson

哎呀，yep已刪除評論 – brodie

要清楚：雖然我們*可以*在Javascript中檢查這些東西以獲得良好的用戶體驗，它將*不*防止禁用JavaScript的用戶無法輸入這些值。這不應該是你的最後防線，還需要進行服務器端驗證。（我敢打賭你知道這一點，但未來的讀者可能不會。） – Matchu

攔截字段的關鍵事件，在輸入時檢測非法字符，防止它們進入字段，並在字段（插入頁面）附近添加臨時msg，以解釋允許使用哪些字符或值。彈出警報是在打字過程中提供反饋的不好方法。

然後，在提交之前再次驗證，因爲還有其他方法可以將數據導入字段（拖放，複製/粘貼等），以至於您可能沒有抓到所有內容。

下面是僅兩個整數和小數只顯示與臨時的消息字段時無效鍵被鍵入的一個jQuery例如：

工作的jsfiddle：http://jsfiddle.net/jfriend00/CkDTy/

$(".integer").keypress(function(e) { 
    if (e.which < 48 || e.which > 57) { 
     showAdvice(this, "Integer values only"); 
     return(false); 
    } 
}); 

$(".decimal").keypress(function(e) { 
    // 46 is a period 
    if (e.which != 46 && (e.which < 48 || e.which > 57)) { 
     showAdvice(this, "Decimal numbers only"); 
     return(false); 
    } 
    if (e.which == 46 && this.value.indexOf(".") != -1) { 
     showAdvice(this, "Only one period allowed in decimal numbers"); 
     return(false); // only one decimal allowed 
    } 
}); 

function showAdvice(obj, msg) { 
    $("#singleAdvice").stop(true, false).remove(); 
    $('<span id="singleAdvice" class="advice">' + msg + '</span>').insertAfter(obj); 
    $("#singleAdvice").delay(4000).fadeOut(1500); 
}

來源

2011-09-02 03:57:56 jfriend00

+1用於記住非鍵盤輸入方法。 – nnnnnn

這不支持使用箭頭鍵或退格按鈕。 – James

@詹姆斯 - 我不確定你的意思。箭頭和退格鍵不會生成按鍵事件，因此它們不會被此解決方案阻止，也不會導致問題。 – jfriend00

這裏有一個小的jQuery防止非 - 數字輸入：

$(function() { 
    $('input').bind('keyup', function(event) { 
     var currValue = $(this).val(); 

     if(currValue.search(/[^0-9]/) != -1) 
     { 
      // Change this to something less obnoxious 
      alert('Only numerical inputs please'); 
     } 

     $(this).val(currValue.replace(/[^0-9]/, '')); 
    }); 
});

來源

2011-09-02 04:02:40 attack

您可以添加一個事件（按下按鍵）並檢測小數點是否已被按下是否服務。同樣在表單提交中，使用正則表達式來檢查提交的數據是否正確（因爲用戶可以使用像螢火蟲一樣的實時編輯器來僞造數據）。另外，請確保在用戶禁用javascript的情況下仔細檢查您的服務器端。

例如：

<input type="text" onkeypress="checkDecimal();" /> 
<input type="submit" onclick="checkBeforeSubmit();" /> 

function checkDecimal() { 
    // your code goes here 
} 

function checkBeforeSubmit() { 
    // your code goes here 
}

您更好地使用相同的功能，因爲它基本上是相同的事情，從兩個事件調用它。

在服務器端，再次檢查提交的數據

來源

2011-09-02 04:03:25

如何防止用戶輸入小數？

回答

相關問題