在输入单价或数量后,该控件失去焦点时进行计算(要求进行必要的数据有效性验证,即都只能输入数值,数量只能是整数)

 

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3.     <head> 
  4.         <title> new document </title> 
  5.         <style type="text/css"> 
  6.         .fontred    {  color:Red;    } 
  7.         </style> 
  8.         <script type="text/javascript"> 
  9.         <!-- 
  10.             function calc() 
  11.             { 
  12.                 document.getElementById("LabelMsg1").innerHTML = ""
  13.                 document.getElementById("LabelMsg2").innerHTML = ""
  14.                 var x1 = document.getElementById("text1").value; 
  15.                 var x3 = document.getElementById("text3").value; 
  16.                 var reg = new RegExp(/^\d*$/); 
  17.                 if(!reg.test(x1)) 
  18.                 { 
  19.                     document.getElementById("LabelMsg2").innerHTML = "数量非法!"
  20.                     document.getElementById("text1").focus(); 
  21.                     document.getElementById("text1").select(); 
  22.                     return; 
  23.                 } 
  24.                 var x2 = document.getElementById("text2").value; 
  25.                 var x4 = document.getElementById("text4").value; 
  26.                 var reg = new RegExp(/^\d*[\.]?\d*$/); 
  27.                 if(!reg.test(x2)) 
  28.                 { 
  29.                     document.getElementById("LabelMsg1").innerHTML = "单价非法!";  
  30.                     document.getElementById("text2").focus(); 
  31.                     return; 
  32.                 } 
  33.                 var y1 = document.getElementById("label1").innerHTML = x1*x2; 
  34.                 var y2 = document.getElementById("label2").innerHTML = x3*x4; 
  35.                 document.getElementById("label3").innerHTML = y1+y2; 
  36.             } 
  37.         // --> 
  38.         </script> 
  39.     </head> 
  40.  
  41.     <body> 
  42.     <form id="a" action=""> 
  43.     <table> 
  44.     <tr> 
  45.         <td>品名</td> 
  46.         <td>单价</td> 
  47.         <td>数量</td> 
  48.         <td>金额小计</td> 
  49.     </tr> 
  50.     <tr> 
  51.         <td>苹果</td> 
  52.         <td><input type="text" id="text2" value="" onblur="calc()" /></td> 
  53.         <td><input type="text" id="text1" value="" onblur="calc()" /></td> 
  54.         <td><label id="label1" ></label></td> 
  55.     </tr> 
  56.     <tr> 
  57.         <td>香蕉</td> 
  58.         <td><input type="text" id="text4" value="" onblur="calc()" /></td> 
  59.         <td><input type="text" id="text3" value="" onblur="calc()" /></td> 
  60.         <td><label id="label2" ></label></td> 
  61.     </tr> 
  62.     <tr> 
  63.         <td>金额总计</td> 
  64.         <td><label id="LabelMsg1" class="fontred"></label></td> 
  65.         <td><label id="LabelMsg2" class="fontred"></label></td> 
  66.         <td><label id="label3" ></label></td> 
  67.     </tr> 
  68.     </table> 
  69.     </form> 
  70.     </body> 
  71. </html> 

效果如下图: