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更改为匹配模式

回答

相关问题