·您当前的位置:首页 > 技术教程 > JavaScript >

[js]输入框只能输入数字,并自动算出数字相加总和的源代码

时间:2016-06-13 09:21酷播
[js]输入框只能输入数字,并自动算出数字相加总和的源代码

开发系统时,常会需要将使用者在多个 TextBox 中输入的数字,做加总的计算,此时必须验证使用者只能输入数字。如下图 1 所示,有时可能还需要用 JavaScript 做数字的实时加总计算,并将计算结果显示在 Label 中。

figure1
图 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)


重点代码如下:

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

 

  1. <html xmlns="http://www.w3.org/1999/xhtml" > 
  2. <head runat="server"> 
  3.     <title>未命名頁面</title> 
  4.     <script type="text/javascript">         
  5.         function calc() { 
  6.             var re = /^/d+$/;   // 驗證只能輸入數字的 Regular Expression 
  7.             intTotal = 0
  8.             intTextBox1 = 0
  9.             intTextBox2 = 0
  10.             intTextBox3 = 0
  11.              
  12.             if (document.all.TextBox1.value != '') 
  13.             { 
  14.                 obj = document.all.TextBox1; 
  15.                if (obj.value!='' && !re.test(obj.value))                 
  16.                { 
  17.                    document.all.Label1.innerText = '本欄位只能輸入數字'
  18.                   document.all.TextBox1.select(); 
  19.                    
  20.                   // 若頁面中,有寫入資料庫功能的「確定」按鈕,可在這將其設為唯讀 
  21.                   // document.all.FormView1_btnInsertConfirm.disabled = true
  22.                    
  23.                   return false; 
  24.                } 
  25.                else 
  26.                { 
  27.                    document.all.Label1.innerText = ''; // 若使用者改為只輸入數字,則清除 Label1 中的錯誤訊息 
  28.                     
  29.                    // 若頁面中,有寫入資料庫功能的「確定」按鈕,可在這解除唯讀 
  30.                   // document.all.FormView1_btnInsertConfirm.disabled = false
  31.                     
  32.                     intTextBox1 = eval(document.all.TextBox1.value);  
  33.                 } 
  34.             } 
  35.             else 
  36.             { 
  37.                 document.all.Label1.innerText = '';     // 若使用者把 TextBox1 清空,則清除 Label1 中的錯誤訊息 
  38.             } 
  39.              
  40.             if (document.all.TextBox2.value != '') 
  41.             { 
  42.                 obj = document.all.TextBox2; 
  43.                if (obj.value!='' && !re.test(obj.value))                 
  44.                { 
  45.                    document.all.Label2.innerText = '本欄位只能輸入數字'
  46.                   document.all.TextBox2.select(); 
  47.                    
  48.                   // 若頁面中,有寫入資料庫功能的「確定」按鈕,可在這將其設為唯讀 
  49.                   // document.all.FormView1_btnInsertConfirm.disabled = true
  50.                    
  51.                   return false; 
  52.                } 
  53.                else 
  54.                { 
  55.                    document.all.Label2.innerText = ''; // 若使用者改為只輸入數字,則清除 Label2 中的錯誤訊息 
  56.                     
  57.                    // 若頁面中,有寫入資料庫功能的「確定」按鈕,可在這解除唯讀 
  58.                   // document.all.FormView1_btnInsertConfirm.disabled = false
  59.                    
  60.                     intTextBox2 = eval(document.all.TextBox2.value);  
  61.                 } 
  62.             } 
  63.             else 
  64.             { 
  65.                 document.all.Label2.innerText = '';     // 若使用者把 TextBox2 清空,則清除 Label2 中的錯誤訊息 
  66.             } 
  67.              
  68.             if (document.all.TextBox3.value != '') 
  69.             { 
  70.                 obj = document.all.TextBox3; 
  71.                if (obj.value!='' && !re.test(obj.value))                 
  72.                { 
  73.                    document.all.Label3.innerText = '本欄位只能輸入數字'
  74.                   document.all.TextBox3.select(); 
  75.                    
  76.                   // 若頁面中,有寫入資料庫功能的「確定」按鈕,可在這將其設為唯讀 
  77.                   // document.all.FormView1_btnInsertConfirm.disabled = true
  78.                    
  79.                   return false; 
  80.                } 
  81.                else 
  82.                { 
  83.                    document.all.Label3.innerText = ''; // 若使用者改為只輸入數字,則清除 Label3 中的錯誤訊息 
  84.                     
  85.                    // 若頁面中,有寫入資料庫功能的「確定」按鈕,可在這解除唯讀 
  86.                   // document.all.FormView1_btnInsertConfirm.disabled = false
  87.                    
  88.                     intTextBox3 = eval(document.all.TextBox3.value);  
  89.                 } 
  90.             } 
  91.             else 
  92.             { 
  93.                 document.all.Label3.innerText = '';     // 若使用者把 TextBox3 清空,則清除 Label3 中的錯誤訊息 
  94.             } 
  95.              
  96.                  
  97.             intTotal = intTextBox1 + intTextBox2 + intTextBox3;     // 加總後的數字 
  98.             document.all.LabelTotal.innerText = intTotal;           // 顯示三個 TextBox 加總後的數字 
  99.         } 
  100.  
  101.     </script> 
  102. </head> 
  103. <body> 
  104.     <form id="form1" runat="server"> 
  105.     <div> 
  106.         <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><asp:Label ID="Label1" runat="server" ForeColor="Red" Font-Size="Small"></asp:Label><br /> 
  107.         <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox><asp:Label ID="Label2" runat="server" ForeColor="Red" Font-Size="Small"></asp:Label><br /> 
  108.         <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox><asp:Label ID="Label3" runat="server" ForeColor="Red" Font-Size="Small"></asp:Label><br /> 
  109.         <br /> 
  110.         三個 TextBox 的數字加總為: 
  111.         <asp:Label ID="LabelTotal" runat="server"></asp:Label><br /> 
  112.     </div> 
  113.     </form> 
  114. </body> 
  115. </html> 

 

热门文章推荐

请稍候...

保利威视云平台-轻松实现点播直播视频应用

酷播云数据统计分析跨平台播放器