Question

我正在寻找表单验证脚本（可能是JavaScript？）。

我们希望这是一个输入文本字段，而不是下拉列表。该公司提供各种长度的定制切割产品。最小订单是0.5米，之后他们只想允许以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

我相信你可以在JS中用小数模型修改。您将要使用一个函数来测试＆＃34;平等＆＃34;这些数字，因为它们是浮动的。

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

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

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

Answer 2

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

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

DEMO：http://regex101.com/r/yO6eO2

这不是一个非常好的检查，因为它允许数字以0开头。如果这困扰你，你可以通过查看其他数字regexp轻松修复它。

以下是在JavaScript中集成解决方案的演示：

http://jsbin.com/wutizuri/1

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

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

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

您可以使用此功能。这将检查该值是否大于或等于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 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/

它指向可用的底部填充物。

允许数字仅以5和0结尾

5 个答案: