视频技术

FFmpeg red5 nginx Html5 rtsp rtmp

·您当前的位置：首页 > 技术教程 > 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. { 
  3.     // 替三個 TextBox 加上 JavaScript 函數呼叫的功能 
  4.     TextBox1.Attributes["onBlur"] = "calc();"; 
  5.     TextBox2.Attributes["onBlur"] = "calc();"; 
  6.     TextBox3.Attributes["onBlur"] = "calc();"; 
  7. } 

 

  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> 

 

热门文章推荐

请稍候...

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

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