html5 新增属性:input 的 min 及 step

html5 新增属性:input 的 min 及 step_第1张图片

产品中需要针对物品设置价格,按照要求最低值是0.99元,控件上下箭头步进1元。

刚好 html5 中针对 number 类型的 input 新增了 min 和 step 两个属性,顾名思义一个是最小值另一个是步进值。按要求设置好后很顺利实现目标。

直到提交表单时,发现如果不是0.99结尾的整数都会被提示非法值,在网上搜了下看到几个例子和我司产品一样使用 bootstrap 架构,min 和 step 用法也相同,只是多了几个自定义的属性。当时自作聪明以为问题出在多出来的自定义属性上,调查了很久发现网上的例子应该加载了其他的 js 控件做了辅助验证,和我的问题并没有半毛钱的关系。直到查到 w3c 标准的定义,发现 step 并不只是控制控件的步进值,对最终的值也会产生约束。

Constraint validation: When the element has an allowed value step, and the result of applying the algorithm to convert a string to a number to the string given by the element's value is a number, and that number subtracted from the step base is not an integral multiple of the allowed value step, the element is suffering from a step mismatch.

此为具体校验规则,其中 step base 求值规则摘要如下

The step base is the value returned by the following algorithm:

  1. If the element has a min content attribute, and the result of applying the algorithm to convert a string to a number to the value of the min content attribute is not an error, then return that result and abort these steps.

所以我定义了 min="0.99" step="1" 之后,校验规则就变成除以 step 取余然后减去 min 为 0

Otherwise, if the attribute's value is an ASCII case-insensitive match for the string "any", then there is no allowed value step.

参考 step 的说明,定义成 step="any" 就可以绕过 step 的检查,而且貌似默认的步进就是 1,成功达到目的。

你可能感兴趣的:(html5 新增属性:input 的 min 及 step)