在脚本中只允许数字和点答案

【问题标题】：Allow only numbers and dot in script在脚本中只允许数字和点
【发布时间】：2012-04-05 16:04:43
【问题描述】：

我正在使用这个 javascript 来限制用户只输入数字和一个点作为小数分隔符。

<script type="text/javascript">
 function fun_AllowOnlyAmountAndDot(txt)
        {
            if(event.keyCode > 47 && event.keyCode < 58 || event.keyCode == 46)
            {
               var txtbx=document.getElementById(txt);
               var amount = document.getElementById(txt).value;
               var present=0;
               var count=0;

               if(amount.indexOf(".",present)||amount.indexOf(".",present+1));
               {
              // alert('0');
               }

              /*if(amount.length==2)
              {
                if(event.keyCode != 46)
                return false;
              }*/
               do
               {
               present=amount.indexOf(".",present);
               if(present!=-1)
                {
                 count++;
                 present++;
                 }
               }
               while(present!=-1);
               if(present==-1 && amount.length==0 && event.keyCode == 46)
               {
                    event.keyCode=0;
                    //alert("Wrong position of decimal point not  allowed !!");
                    return false;
               }

               if(count>=1 && event.keyCode == 46)
               {

                    event.keyCode=0;
                    //alert("Only one decimal point is allowed !!");
                    return false;
               }
               if(count==1)
               {
                var lastdigits=amount.substring(amount.indexOf(".")+1,amount.length);
                if(lastdigits.length>=2)
                            {
                              //alert("Two decimal places only allowed");
                              event.keyCode=0;
                              return false;
                              }
               }
                    return true;
            }
            else
            {
                    event.keyCode=0;
                    //alert("Only Numbers with dot allowed !!");
                    return false;
            }

        }

    </script>

<td align="right">
<asp:TextBox ID="txtQ1gTarget" runat="server" Width="30px" CssClass="txtbx" MaxLength="6" onkeypress="return fun_AllowOnlyAmountAndDot(this);"></asp:TextBox>
</td>

但是 onkeypress(this) 事件在这个地方的那个函数中返回 object required 错误

var amount = document.getElementById(txt).value;

我的错误是什么？

【问题讨论】：

不阻止复制和粘贴 :(
你可以试试这个：onkeypress="return fun_AllowOnlyAmountAndDot(event);"

标签： javascript asp.net regex validation

【解决方案1】：

这是使用正则表达式的好地方。

通过使用正则表达式，您可以用一行代码替换所有代码。

您可以使用以下 regex 来验证您的要求：

[0-9]*\.?[0-9]*

换句话说：零个或多个数字字符，后跟零个或一个句点，后跟零个或多个数字字符。

你可以用这个替换你的代码：

function validate(s) {
    var rgx = /^[0-9]*\.?[0-9]*$/;
    return s.match(rgx);
}

该代码可以替换您的整个函数！

请注意，您必须使用反斜杠转义句点（否则它代表“任何字符”）。

如需了解更多关于在 javascript 中使用正则表达式的信息，请查看：

http://www.regular-expressions.info/javascript.html

你也可以在这里测试上面的正则表达式：

http://www.regular-expressions.info/javascriptexample.html

上面使用的正则表达式的解释：

括号表示“括号内的任何字符。”您可以使用连字符（如上）来表示一系列字符。
* 表示“前一个表达式的零个或多个。”
[0-9]* 表示“零个或多个数字”
反斜杠用作句点的转义字符，因为句点通常代表“任何字符”。
? 表示“前一个字符的零个或一个。”
^ 表示字符串的开头。
$ 表示字符串的结尾。
以^ 开始正则表达式并以$ 结束它可确保整个字符串遵循正则表达式模式。

希望这会有所帮助！

【讨论】：

谢谢。让我试试正则表达式
matches() 应该是 match() 吗？
不是正则表达式专家，但我必须使用 /^[0-9-]*\.?[0-9]*$/ 来匹配负数。感谢您的回答。
如果您不想单独匹配点 (".")，请将第一个星号 (*) 替换为加号 (+)

【解决方案2】：

改用 Jquery。在文本框中添加一个十进制类：

<input type="text" class="decimal" value="" />

在您的 JS 中使用此代码。它检查多个小数并限制用户只能输入数字。

$('.decimal').keyup(function(){
    var val = $(this).val();
    if(isNaN(val)){
         val = val.replace(/[^0-9\.]/g,'');
         if(val.split('.').length>2) 
             val =val.replace(/\.+$/,"");
    }
    $(this).val(val); 
});

检查这个小提琴：http://jsfiddle.net/2YW8g/

希望对你有帮助。

【讨论】：

这行不通。允许多个小数。 screencast.com/t/s43DpVAhw

【解决方案3】：

只需在输入文本中添加以下代码：

onkeypress='return event.charCode == 46 || (event.charCode >= 48 && event.charCode <= 57)'

【讨论】：

【解决方案4】：

而不是使用这个：

onkeypress="return fun_AllowOnlyAmountAndDot(this);"

你应该使用这个：

onkeypress="return fun_AllowOnlyAmountAndDot(this.id);"

【讨论】：

【解决方案5】：

function isNumberKey(evt,id)
{
	try{
        var charCode = (evt.which) ? evt.which : event.keyCode;
  
        if(charCode==46){
            var txt=document.getElementById(id).value;
            if(!(txt.indexOf(".") > -1)){
	
                return true;
            }
        }
        if (charCode > 31 && (charCode < 48 || charCode > 57) )
            return false;

        return true;
	}catch(w){
		alert(w);
	}
}

<html>
  <head>
  </head>
  <body>
    <INPUT id="txtChar" onkeypress="return isNumberKey(event,this.id)" type="text" name="txtChar">
  </body>
</html>

【讨论】：

请解释一下你做了什么。

【解决方案6】：

<input type="text" class="decimal" value="" />
$('.decimal').keypress(function(evt){
    return (/^[0-9]*\.?[0-9]*$/).test($(this).val()+evt.key);
});

我认为这个简单的解决方案可能是。

【讨论】：

当输入为“123...122”时失败，如果放在一起它会忽略点

【解决方案7】：

这对我来说效果最好。

我还在模糊中应用货币格式化程序，其中小数部分以 2 位四舍五入，以防在使用 parseFloat 验证后。

获取和设置光标位置的函数来自 Vishal Monpara 的博客。我还用这些功能做了一些很好的事情。如果需要，您可以轻松删除 2 个强制使用 2 个小数的代码块，并摆脱 set/get caret 函数。

<html>
<body>
<input type="text" size="30" maxlength="30" onkeypress="return numericValidation(this,event);" />
<script language="JavaScript">
    function numericValidation(obj,evt) {
        var e = event || evt; // for trans-browser compatibility

        var charCode = e.which || e.keyCode;        

        if (charCode == 46) { //one dot
            if (obj.value.indexOf(".") > -1)
                return false;
            else {
                //---if the dot is positioned in the middle give the user a surprise, remember: just 2 decimals allowed
                var idx = doGetCaretPosition(obj);
                var part1 = obj.value.substr(0,idx),
                    part2 = obj.value.substring(idx);

                if (part2.length > 2) {
                    obj.value = part1 + "." + part2.substr(0,2);
                    setCaretPosition(obj, idx + 1);
                    return false;
                }//---

                //allow one dot if not cheating
                return true;
            }
        }
        else if (charCode > 31 && (charCode < 48 || charCode > 57)) { //just numbers
            return false;
        }

        //---just 2 decimals stubborn!
        var arr = obj.value.split(".") , pos = doGetCaretPosition(obj);

        if (arr.length == 2 && pos > arr[0].length && arr[1].length == 2)                               
            return false;
        //---

        //ok it's a number
        return true;
    }

    function doGetCaretPosition (ctrl) {
        var CaretPos = 0;   // IE Support
        if (document.selection) {
        ctrl.focus ();
            var Sel = document.selection.createRange ();
            Sel.moveStart ('character', -ctrl.value.length);
            CaretPos = Sel.text.length;
        }
        // Firefox support
        else if (ctrl.selectionStart || ctrl.selectionStart == '0')
            CaretPos = ctrl.selectionStart;
        return (CaretPos);
    }

    function setCaretPosition(ctrl, pos){
        if(ctrl.setSelectionRange)
        {
            ctrl.focus();
            ctrl.setSelectionRange(pos,pos);
        }
        else if (ctrl.createTextRange) {
            var range = ctrl.createTextRange();
            range.collapse(true);
            range.moveEnd('character', pos);
            range.moveStart('character', pos);
            range.select();
        }
    }
</script>
</body>
</html>

【讨论】：

【解决方案8】：

<script type="text/javascript">
    function numericValidation(txtvalue) {
        var e = event || evt; // for trans-browser compatibility
        var charCode = e.which || e.keyCode;
        if (!(document.getElementById(txtvalue.id).value))
         {
            if (charCode > 31 && (charCode < 48 || charCode > 57))
                return false;
            return true;
        }
        else {
               var val = document.getElementById(txtvalue.id).value;
            if(charCode==46 || (charCode > 31 && (charCode > 47 && charCode < 58)) )
             {
                var points = 0;            
                points = val.indexOf(".", points);                    
                if (points >= 1 && charCode == 46)
                {      
                   return false;
                }                 
                if (points == 1) 
                {
                    var lastdigits = val.substring(val.indexOf(".") + 1, val.length);
                    if (lastdigits.length >= 2)
                    {
                        alert("Two decimal places only allowed");
                        return false;
                    }
                }
                return true;
            }
            else {
                alert("Only Numarics allowed");
                return false;
            }
        }
    }

</script>
<form id="form1" runat="server">
<div>
  <asp:TextBox ID="txtHDLLevel" MaxLength="6" runat="server" Width="33px" onkeypress="return numericValidation(this);"  />
</div>
</form>

【讨论】：

发布解决方案很好，但如果您描述或强调错误所在，它可能会改善您的答案。

【解决方案9】：

function isNumber(evt) {
    evt = (evt) ? evt : window.event;
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 46 || charCode > 57)) {
        return false;
    }
    return true;
}

你应该使用这个函数并写下这个元素的属性；

HTML 代码：

<input id="deneme" data-mini="true" onKeyPress="return isNumber(event)" type="text"/>`

【讨论】：

【解决方案10】：

试试这个代码

var check = function(evt){

var data = document.getElementById('num').value;
if((evt.charCode>= 48 && evt.charCode <= 57) || evt.charCode== 46 ||evt.charCode == 0){
if(data.indexOf('.') > -1){
 if(evt.charCode== 46)
  evt.preventDefault();
}
}else
evt.preventDefault();
};

document.getElementById('num').addEventListener('keypress',check);

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<input type="text" id="num" value="" />



</body>
</html>

【讨论】：

【解决方案11】：

对多个文本文件试试这个（使用类选择器）：

Click here for example..

var checking = function(event){
	var data = this.value;
	if((event.charCode>= 48 && event.charCode <= 57) || event.charCode== 46 ||event.charCode == 0){
		if(data.indexOf('.') > -1){
 			if(event.charCode== 46)
  				event.preventDefault();
		}
	}else
		event.preventDefault();
	};

	function addListener(list){
		for(var i=0;i<list.length;i++){
    		list[i].addEventListener('keypress',checking);
    	}
	}
	var classList = document.getElementsByClassName('number');
	addListener(classList);

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
  <input type="text" class="number" value="" /><br><br>
  <input type="text" class="number" value="" /><br><br>
  <input type="text" class="number" value="" /><br><br>
  <input type="text" class="number" value="" /><br><br>
</body>
</html>

【讨论】：

【解决方案12】：

此功能将防止输入除数字和单个点以外的任何内容。

function validateQty(el, evt) {
   var charCode = (evt.which) ? evt.which : event.keyCode
    if (charCode != 45 && charCode != 8 && (charCode != 46) && (charCode < 48 || charCode > 57))
        return false;
    if (charCode == 46) {
        if ((el.value) && (el.value.indexOf('.') >= 0))
            return false;
        else
            return true;
    }
    return true;
    var charCode = (evt.which) ? evt.which : event.keyCode;
    var number = evt.value.split('.');
    if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false;
    }
};

&lt;input type="text" onkeypress='return validateQty(this,event);'&gt;

【讨论】：

【解决方案13】：

你可以用这个

Javascript

function isNumber(evt) {
    evt = (evt) ? evt : window.event;
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57)&&(charCode!=46)) {
        return false;
    }
    return true;
}

用法

 <input onkeypress="return isNumber(event)" class="form-control">

【讨论】：

【解决方案14】：

 <script type="text/Javascript">
        function checkDecimal(inputVal) {
            var ex = /^[0-9]+\.?[0-9]*$/;
            if (ex.test(inputVal.value) == false) {
                inputVal.value = inputVal.value.substring(0, inputVal.value.length - 1);
            }
        }
</script>

【讨论】：

【解决方案15】：

 <input type="text" class="form-control" id="odometer_reading" name="odometer_reading"  placeholder="Odometer Reading" onblur="odometer_reading1();" onkeypress='validate(event)' required="" />
<script>
                function validate(evt) {
                  var theEvent = evt || window.event;
                  var key = theEvent.keyCode || theEvent.which;
                  key = String.fromCharCode( key );
                  var regex = /[0-9]|\./;
                  if( !regex.test(key) ) {
                    theEvent.returnValue = false;
                    if(theEvent.preventDefault) theEvent.preventDefault();
                  }
                }
            </script>

【讨论】：

【解决方案16】：

希望这可以帮助某人

$(document).on("input", ".numeric", function() {
this.value = this.value.match(/^\d+\.?\d{0,2}/);});

【讨论】：