文本字段不得在6个数字和数字后输入

Question

我们正在显示文本字段以输入邮政编码。

我们只想验证数字和6位数字。

表示在6位数字之后，不允许输入其他数字，也不允许输入任何符号或字母。

    <input name="zipcode" size="17" type="text" id="zipcode" value="<?php echo Mage::getModel('core/cookie')->get('zip'); ?>" 
maxlength="10" class="input-text" placeholder="<?php echo $this->__('Enter ZIP Code'); ?>"/>
<button type="button" name="zip-check" title="Check" class="button" id="zip-check" ><span><?php echo $this->__('Check'); ?></span></button>
<div id="delivery-message"></div>

脚本

Event.observe('zip-check', 'click', function(event){
        new Ajax.Request("<?php echo $this->getUrl('checkdelivery/index/index') ?>", {
            method: "get",
            parameters: {zipcode : $('zipcode').value },
            onSuccess: function(transport) {
                 var json = transport.responseText.evalJSON();
                 $('delivery-message').update(json.message);                 
                 $('delivery-message').setStyle({ color: json.color});
                 $('delivery-html').update(json.html);  
            }
        });
    });

我尝试了class="input-text validate-length maximum-length-6 minimum-length-6 validate-digits"但它对我没有用

Answer 1

在您的输入框中添加这行代码

maxlength="6" onkeypress="return isNumber(event)" title="Invalid ZIP code"

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

它应该工作。

Answer 2

可以限制字符的量和类型（数字） input与HTML5属性，像这样：

<input name="zipcode" size="17" type="text" maxlength="6" placeholder="ZIP Code" pattern="\d{6}" />

maxlength限制input字段的最大字符数。
该pattern限制了input允许的字符类型。 在这种情况下，只有输入六位数字才有效。 但是，这似乎最初仅在提交表单时才进行验证，而不是在输入时进行验证。

有关input字段和属性的更多信息，可以在这里找到： http : //www.w3schools.com/tags/tag_input.asp

要限制输入无效字符，您需要使用JavaScript。 一个有效的示例可以在这里找到： http : //codepen.io/michewl/pen/jrEQgd/

JavaScript部分使用jQuery侦听keydown-Event，并防止在input插入任何非数字字符。

您需要按如下方式更改HTML：

<input name="zipcode" size="17" type="text" id="zipcode" value="<?php echo Mage::getModel('core/cookie')->get('zip'); ?>" maxlength="6" class="input-text" placeholder="<?php echo $this->__('Enter ZIP Code'); ?>" pattern="\d{6}"/>
<button type="button" name="zip-check" title="Check" class="button" id="zip-check" ><span><?php echo $this->__('Check'); ?></span></button>

并添加以下JavaScript：

<script>
    $("#zipcode").keydown(function(event) {
        return /\d/.test(event.key);
    });
</script>

根据您在上面评论中发布的链接，我认为jQuery是可用的。