開發系統時，常會需要將使用者在多個?TextBox?中輸入的數字，做加總的計算，此時必須驗證使用者只能輸入數字。如下圖?1?所示，有時可能還需要用?JavaScript?做數字的實時加總計算，并將計算結果顯示在?Label?中。


圖?1　頁面下方的?Label，有三個?TextBox?輸入數字的實時加總計算結果


在圖?1?的三個?TextBox?中，若要驗證輸入是否為數字，只要用?ASP.NET?的驗證控件，或?AJAX?的MaskedEditExtender?即可辦到。但用驗證控件的話，當使用者輸入的不是數字時，并無法將鼠標或鍵盤的?focus，強制停留在輸入錯誤的?TextBox?中?(否則非數字內容，會造成實時加總的計算錯誤)；若用?AJAX?的話，則會造成實時計算加總的?JavaScript?失效。

本帖提供的?ASP.NET?示例，為「驗證只能輸入數字」、「實時數字加總計算」，都用?JavaScript?處理。若使用者輸入的為中文字、特殊符號，除了像驗證控件一樣，會在右側顯示紅色的錯誤字樣，本示例還會強制將鼠標或鍵盤的 focus，停留在?TextBox?中，直到使用者正確地輸入數字為止。

本帖的示例代碼下載點：
http://files.cnblogs.com/WizardWu/080831.zip

(執行本示例，不用數據庫，但需要?IIS?或?VS 2005)


重點代碼如下：

?

protected?void?Page_Load(object?sender,?EventArgs?e)
{
????//?替三個?TextBox?加上?JavaScript?函數呼叫的功能
????TextBox1.Attributes["onBlur"]?=?"calc();";
????TextBox2.Attributes["onBlur"]?=?"calc();";
????TextBox3.Attributes["onBlur"]?=?"calc();";
}

?

<html?xmlns="http://www.w3.org/1999/xhtml"?>
<head?runat="server">
????<title>未命名頁面</title>
????<script?type="text/javascript">????????
????????function?calc()?{
????????????var?re?=?/^/d+$/;???//?驗證只能輸入數字的?Regular?Expression
????????????intTotal?=?0;
????????????intTextBox1?=?0;
????????????intTextBox2?=?0;
????????????intTextBox3?=?0;
????????????
????????????if?(document.all.TextBox1.value?!=?'')
????????????{
????????????????obj?=?document.all.TextBox1;
　??????????????if?(obj.value!=''?&&?!re.test(obj.value))????????????????
　??????????????{
　??????????????????document.all.Label1.innerText?=?'本欄位只能輸入數字';
　　????????????????document.all.TextBox1.select();
　　????????????????
　　????????????????//?若頁面中，有寫入資料庫功能的「確定」按鈕，可在這將其設為唯讀
　　????????????????//?document.all.FormView1_btnInsertConfirm.disabled?=?true;
　　????????????????
　　????????????????return?false;
　??????????????}
　??????????????else
　??????????????{
　??????????????????document.all.Label1.innerText?=?'';?//?若使用者改為只輸入數字，則清除?Label1?中的錯誤訊息
　??????????????????
　??????????????????//?若頁面中，有寫入資料庫功能的「確定」按鈕，可在這解除唯讀
　　????????????????//?document.all.FormView1_btnInsertConfirm.disabled?=?false;
　??????????????????
????????????????????intTextBox1?=?eval(document.all.TextBox1.value);?
????????????????}
????????????}
????????????else
????????????{
????????????????document.all.Label1.innerText?=?'';?????//?若使用者把?TextBox1?清空，則清除?Label1?中的錯誤訊息
????????????}
????????????
????????????if?(document.all.TextBox2.value?!=?'')
????????????{
????????????????obj?=?document.all.TextBox2;
　??????????????if?(obj.value!=''?&&?!re.test(obj.value))????????????????
　??????????????{
　??????????????????document.all.Label2.innerText?=?'本欄位只能輸入數字';
　　????????????????document.all.TextBox2.select();
　　????????????????
　　????????????????//?若頁面中，有寫入資料庫功能的「確定」按鈕，可在這將其設為唯讀
　　????????????????//?document.all.FormView1_btnInsertConfirm.disabled?=?true;
　　????????????????
　　????????????????return?false;
　??????????????}
　??????????????else
　??????????????{
　??????????????????document.all.Label2.innerText?=?'';?//?若使用者改為只輸入數字，則清除?Label2?中的錯誤訊息
　??????????????????
　??????????????????//?若頁面中，有寫入資料庫功能的「確定」按鈕，可在這解除唯讀
　　????????????????//?document.all.FormView1_btnInsertConfirm.disabled?=?false;
　　????????????????
????????????????????intTextBox2?=?eval(document.all.TextBox2.value);?
????????????????}
????????????}
????????????else
????????????{
????????????????document.all.Label2.innerText?=?'';?????//?若使用者把?TextBox2?清空，則清除?Label2?中的錯誤訊息
????????????}
????????????
????????????if?(document.all.TextBox3.value?!=?'')
????????????{
????????????????obj?=?document.all.TextBox3;
　??????????????if?(obj.value!=''?&&?!re.test(obj.value))????????????????
　??????????????{
　??????????????????document.all.Label3.innerText?=?'本欄位只能輸入數字';
　　????????????????document.all.TextBox3.select();
　　????????????????
　　????????????????//?若頁面中，有寫入資料庫功能的「確定」按鈕，可在這將其設為唯讀
　　????????????????//?document.all.FormView1_btnInsertConfirm.disabled?=?true;
　　????????????????
　　????????????????return?false;
　??????????????}
　??????????????else
　??????????????{
　??????????????????document.all.Label3.innerText?=?'';?//?若使用者改為只輸入數字，則清除?Label3?中的錯誤訊息
　??????????????????
　??????????????????//?若頁面中，有寫入資料庫功能的「確定」按鈕，可在這解除唯讀
　　????????????????//?document.all.FormView1_btnInsertConfirm.disabled?=?false;
　　????????????????
????????????????????intTextBox3?=?eval(document.all.TextBox3.value);?
????????????????}
????????????}
????????????else
????????????{
????????????????document.all.Label3.innerText?=?'';?????//?若使用者把?TextBox3?清空，則清除?Label3?中的錯誤訊息
????????????}
????????????
????????????????
????????????intTotal?=?intTextBox1?+?intTextBox2?+?intTextBox3;?????//?加總後的數字
????????????document.all.LabelTotal.innerText?=?intTotal;???????????//?顯示三個?TextBox?加總後的數字
????????}

????</script>
</head>
<body>
????<form?id="form1"?runat="server">
????<div>
????????<asp:TextBox?ID="TextBox1"?runat="server"></asp:TextBox><asp:Label?ID="Label1"?runat="server"?ForeColor="Red"?Font-Size="Small"></asp:Label><br?/>
????????<asp:TextBox?ID="TextBox2"?runat="server"></asp:TextBox><asp:Label?ID="Label2"?runat="server"?ForeColor="Red"?Font-Size="Small"></asp:Label><br?/>
????????<asp:TextBox?ID="TextBox3"?runat="server"></asp:TextBox><asp:Label?ID="Label3"?runat="server"?ForeColor="Red"?Font-Size="Small"></asp:Label><br?/>
????????<br?/>
????????三個?TextBox?的數字加總為：
????????<asp:Label?ID="LabelTotal"?runat="server"></asp:Label><br?/>
????</div>
????</form>
</body>
</html> 轉自：http://blog.csdn.net/wizardwu/article/details/4680890

轉載于:https://www.cnblogs.com/tangge/archive/2012/05/20/2510841.html

總結

以上是生活随笔為你收集整理的用 JavaScript 验证只能输入数字，并做数字加总的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。