开发系统时，常会需要将使用者在多个 TextBox 中输入的数字，做加总的计算，此时必须验证使用者只能输入数字。如下图 1 所示，有时可能还需要用 JavaScript 做数字的实时加总计算，并将计算结果显示在 Label 中。
图 1 页面下方的 Label，有三个 TextBox 输入数字的实时加总计算结果在图 1 的三个 TextBox 中，若要验证输入是否为数字，只要用 ASP.NET 的验证控件，或 AJAX 的MaskedEditExtender 即可办到。但用验证控件的话，当使用者输入的不是数字时，并无法将鼠标或键盘的 focus，强制停留在输入错误的 TextBox 中 (否则非数字内容，会造成实时加总的计算错误)；若用 AJAX 的话，则会造成实时计算加总的 JavaScript 失效。本帖提供的 ASP.NET 示例，为「验证只能输入数字」、「实时数字加总计算」，都用 JavaScript 处理。若使用者输入的为中文字、特殊符号，除了像验证控件一样，会在右侧显示红色的错误字样，本示例还会强制将鼠标或键盘的 focus，停留在 TextBox 中，直到使用者正确地输入数字为止。本帖的示例代码下载点：
(执行本示例，不用数据库，但需要 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> 转自：