只允许以 5 和 0 结尾的数字

Question

我正在寻找一个表单验证脚本（大概是 JavaScript？）。

我们希望这是一个输入文本字段，而不是下拉菜单。该公司提供定制切割各种长度的产品。最小订单为 0.5m，之后他们只想允许以0.05m 为增量的长度，如下所示：

仅允许两位小数点以0 或5 结尾的数字（如果存在）。

• 0.50（最小订单）
• 0.55
• 0.60
• 0.65
• 等等……
• 1.00
• 1.05
• 1.10
• 1.15
• 等等……
• 130.00
• 130.05
• 130.10
• 等等……

有什么想法吗？有什么建议吗？

更新：

我意识到解决方案需要合并到一些现有脚本中，这可能会使情况复杂化或简化？这是处理表单提交时的操作的代码。

<script type="text/javascript"><!--

  $('select[name="profile_id"], input[name="quantity"]').change(function(){
    $.ajax({
    url: 'index.php?route=product/product/getRecurringDescription',
    type: 'post',
    data: $('input[name="product_id"], input[name="quantity"], select[name="profile_id"]'),
    dataType: 'json',
        beforeSend: function() {
            $('#profile-description').html('');
        },
    success: function(json) {
        $('.success, .warning, .attention, information, .error').remove();

        if (json['success']) {
                $('#profile-description').html(json['success']);
        }   
    }
  });
  });

  $('#button-cart').bind('click', function() {
  $.ajax({
    url: 'index.php?route=checkout/cart/add',
    type: 'post',
    data: $('.product-info input[type=\'text\'], .product-info input[type=\'hidden\'], .product-info input[type=\'radio\']:checked, .product-info input[type=\'checkbox\']:checked, .product-info select, .product-info textarea'),
    dataType: 'json',
    success: function(json) {
        $('.success, .warning, .attention, information, .error').remove();

        if (json['error']) {
            if (json['error']['option']) {
                for (i in json['error']['option']) {
                    $('#option-' + i).after('<span class="error">' + json['error']['option'][i] + '</span>');
                }
            }

                if (json['error']['profile']) {
                    $('select[name="profile_id"]').after('<span class="error">' + json['error']['profile'] + '</span>');
                }
        } 

        if (json['success']) {
            $('#notification').html('<div class="success" style="display: none;">' + json['success'] + '<img src="catalog/view/theme/default/image/close.png" alt="" class="close" /></div>');

            $('.success').fadeIn('slow');

            $('#cart-total').html(json['total']);

            $('html, body').animate({ scrollTop: 0 }, 'slow'); 
        }   
    }
  });
  });
  //--></script>

Answer 1

您可以使用此功能。这将检查该值是否大于或等于 0.5 以及该值是否为 0.05 的乘积：

function check(value) {
    var val = value * 1000;
    var ok = (val>=500) && (val % 50 == 0);
    console.log(value, ok);
    return ok;
}
check(0.50);
check(0.55);
check(0.60);
check(0.65);
check(0.51);
check(0.157);
check(0.64);
check(0.1165);

输出

0.5 true
0.55 true
0.6 true
0.65 true
0.51 false
0.157 false
0.64 false
0.1165 false

Answer 2

我相信你可以在 JS 中修改小数。您需要使用一个函数来测试数字的“相等性”，因为它们是浮点数。

function validate(num){
    return approximatelyEqual(num % 0.05, 0);
}

function approximatelyEqual(x, y){
    return Math.abs(x - y) < 0.00000001;
}

（这是假设您已经将输入转换为数字。）

Answer 3

字符类 [05] 匹配一个数字 0 或 5。
[0-9] 匹配一个从 0 到 9 的数字
\. 匹配一个点。

结合所有，你有你的正则表达式：

^[0-9]+\.[0-9][05]$

下一个考虑最小值是0.50。

^(?:0\.[5-9]|[1-9][0-9]*\.[0-9])[05]$

Answer 4

与您的特定数字匹配的正则表达式是这个：

^\d+(?:\.\d?[05])?$

演示：http://regex101.com/r/yO6eO2

这不是一个很好的检查，例如它允许数字以 0 开头。如果这让您感到困扰，您可以通过查看其他数字正则表达式来轻松解决它。

这是一个在 JavaScript 中集成解决方案的演示：

http://jsbin.com/wutizuri/1

当输入包含有效数字时，它应该在提交错误条目时不执行任何操作并转到 /valid。

代码：http://jsbin.com/wutizuri/1/edit

Answer 5

如果只为支持 HTML5 的浏览器提供服务，那么您可以这样做。

HTML

<form>
    <input id="cutLength" type="number" min="0.5" step="0.05" value="0.5" required></input>
    <input type="submit" value="Submit"></input>
</form>

Javascript

document.getElementById('cutLength').addEventListener('invalid', function () {
    if (this.validity.rangeUnderflow) {
        this.setCustomValidity("Minimum order of 0.5m");
    } else if (this.validity.stepMismatch) {
        this.setCustomValidity("Order must be in steps of 0.05m");
    } else if (this.validity.typeMismatch || this.validity.valueMissing) {
        this.setCustomValidity("Please enter a number for the length");
    }
}, false);

开启jsFiddle

如果您想对该主题进行一些阅读，那么这是一篇相当不错的文章。 http://www.html5rocks.com/en/tutorials/forms/constraintvalidation/

它指向底部可用的 polyfill。