JS验证仅限制文本字段中的数字

Question

我们有一个 magento 电子商务网站。

我们需要以下代码的验证支持只有数字

<input type="text" onkeydown="limit(this);" onkeyup="limit(this); "title="<?php echo $this->__('Zip/Postal Code') ?>"
 name="billing[postcode]" id="billing:postcode" 
 value="<?php echo $this->escapeHtml($this->getAddress()->getPostcode()) ?>"
 class="input-text validate-zip-international
 <?php echo $this->helper('customer/address')->getAttributeValidationClass('postcode') ?>" placeholder="Postal code"/>

JS

function limit(element)
    {
        var max_chars = 6;

        if(element.value.length > max_chars) {
            element.value = element.value.substr(0, max_chars);
        }
    }

现在它只限制数字，但是当我们输入字母时，光标向上移动。我也想删除最后出现的增量按钮

Answer 1

您可以使用 Validation from http://www.formvalidator.net/#default-validators_numbers 示例

<!-- Any numerical value -->
<input type="text" data-validation="number">

<!-- Only allowing float values -->
<input type="text" data-validation="number" data-validation-allowing="float">

<!-- Allowing float values and negative values -->
<input type="text" data-validation="number" data-validation-allowing="float,negative">

<!-- Validate float number with comma separated decimals -->
<input type="text" data-validation="number" data-validation-allowing="float" 
         data-validation-decimal-separator=",">

<!-- Only allowing numbers from 1 to 100 -->
<input type="text" data-validation="number" data-validation-allowing="range[1;100]">

<!-- Only allowing numbers from -50 to 30 -->
<input type="text" data-validation="number" data-validation-allowing="range[-50;30],negative">

<!-- Only allowing numbers from 0.05 to 0.5 -->
<input type="text" data-validation="number" data-validation-allowing="range[0.05;0.5],float">

Answer 2

HTML5支持type="number"，将type="text"改为type="number"

Answer 3

更改您的 limit 函数，使其仅验证数字的输入：

function limit(element)
{
    var max_chars = 6,
        regexp = /^\d+$/gs;

    if(element.value.length > max_chars) {
        element.value = element.value.substr(0, max_chars);
    }
    if (!regexp.test(element.value)) {
        alert("Only numbers!");
        return false;
    }
}

test() 方法执行搜索正则之间的匹配 表达式和指定的字符串。返回真或假。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/test