Javascript更改爲匹配模式

我有以下代碼。Javascript更改爲匹配模式

<!doctype html> 
<html> 
    <head> 
     <style type="text/css"> 
      #error 
      { 
       color: red; 
      } 
     </style> 
     <script type='text/javascript'> 

      function showpay() { 
       if ((document.calc.loan.value == null || document.calc.loan.value.length == 0) || 
        (document.calc.months.value == null || document.calc.months.value.length == 0) || 
        (document.calc.rate.value == null || document.calc.rate.value.length == 0)) { 
        document.calc.pay.value = "Incomplete data"; 
       } 
       else { 
        var princ = document.calc.loan.value; 
        var term = document.calc.months.value; 
        var intr = document.calc.rate.value/1200; 
        document.calc.pay.value = princ * intr/(1 - (Math.pow(1/(1 + intr), term))); 
       } 
      } 

      function isNumberKey(evt) { 
       var charCode = (evt.which) ? evt.which : evt.keyCode; 
       if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) 
       { 
        document.getElementById('error').style.display = 'inline'; 
        document.getElementById('error').style.color = 'red'; 
        document.getElementById('error').innerHTML = 'OOPs! Only digits allowed.'; 

       } else { 
        document.getElementById('error').style.display = 'none'; 
        return true; 
       } 
      } 
     </script> 
    </head> 
    <body> 
     <form name="calc"> 
      <p> 
      <center> 
       <table width="200" border="1"> 
        <tbody> 
         <tr> 
          <th scope="col">Description</th> 
          <th scope="col">Data Entry</th> 
         </tr> 
         <tr> 
          <td>Principle</td> 
          <td><input type="text" name="loan" id="loan" onkeypress="return isNumberKey(event)"> 
          </td><span id="error"/> 
        </tr> 
        <tr> 
         <td>Interest</td> 
         <td><input type="text" name="rate" id="rate" onkeypress="return isNumberKey(event)"> 
         </td><span id="error"/> 
        </tr> 
        <tr> 
         <td>Tenure</td> 
         <td> 
          <input type="text" name="months" id="months" onkeypress="return isNumberKey(event)"> 
         </td><span id="error"/> 
        </tr> 
        <tr> 
         <td>EMI</td> 
         <td> 
          <input name="textfield4" type="text" id="pay" readonly></td> 
        </tr> 
        <tr> 
         <td><input type="button" value="Submit" onClick='showpay()'/></td> 
         <td><input type=reset value=Reset></td> 
        </tr> 
        </tbody> 
       </table> 

       <font size=1>Enter only numeric values (no commas), using decimal points 
       where needed.<br> 
       Non-numeric values will cause errors.</font> 
      </center> 
     </p> 
    </form> 
</body> 
</html>

這裏我面臨兩個問題，

我越來越不會自動褪色的錯誤。
文本框正在接受字母，其中我只想要數字和小數作爲輸入。它也接受其他特殊字符，只接受.。
我想限制文本框只接受數字和.（十進制數字）。

請讓我知道我如何實現這些。

感謝

來源

2014-11-06 user3872094

創建INCLUSION列表，而不是通過switch語句排除。 – PlantTheIdea 2014-11-06 15:19:56

這將解決keypress的檢查，但是您需要更改項目的id，讓你不會有多個錯誤id就做。這是無效的HTML，這可能是爲什麼它不像你期望的那樣工作。

function isNumberKey(e) { 
    var charCode = (e.which ? e.which : e.keyCode), 
     valid; 

    switch(charCode){ 
     case 96: 
     case 97: 
     case 98: 
     case 99: 
     case 100: 
     case 101: 
     case 102: 
     case 103: 
     case 104: 
     case 105: 
     case 190: 
      valid = true; 
      break; 
     default: 
      valid = false; 
      break; 
    } 

    if(valid){ 
     // remove the error 
    } else { 
     // add the error 
    } 

    return valid; 
}

這至少會限制您要接受的字符，因爲它會創建數字（0-9）字符加週期字符的包含列表。

來源

2014-11-06 15:26:40 PlantTheIdea

爲什麼一個開關？ if（charCode> = 96 && charCode <= 190）{valid = true; }' – 2014-11-06 16:32:01

，因爲您只允許106和190之間的所有字符都有效。 – PlantTheIdea 2014-11-06 16:51:20

對不起，'if（（charCode> = 96 && charCode <= 105）|| charCode == 190）{valid = true; }'。或者，如果你真的想使用一個開關，你可以在所有高於190 – 2014-11-06 17:27:53

Javascript更改爲匹配模式

回答

相關問題