產(chǎn)品中需要針對物品設置價格阴颖,按照要求最低值是0.99元浮驳,控件上下箭頭步進1元坊秸。
剛好 html5 中針對 number 類型的 input 新增了 min 和 step 兩個屬性谜疤,顧名思義一個是最小值另一個是步進值柑船。按要求設置好后很順利實現(xiàn)目標帽撑。
直到提交表單時,發(fā)現(xiàn)如果不是0.99結(jié)尾的整數(shù)都會被提示非法值鞍时,在網(wǎng)上搜了下看到幾個例子和我司產(chǎn)品一樣使用 bootstrap 架構亏拉,min 和 step 用法也相同,只是多了幾個自定義的屬性逆巍。當時自作聰明以為問題出在多出來的自定義屬性上及塘,調(diào)查了很久發(fā)現(xiàn)網(wǎng)上的例子應該加載了其他的 js 控件做了輔助驗證,和我的問題并沒有半毛錢的關系锐极。直到查到 w3c 標準的定義笙僚,發(fā)現(xiàn) step 并不只是控制控件的步進值,對最終的值也會產(chǎn)生約束灵再。
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.
此為具體校驗規(guī)則肋层,其中 step base 求值規(guī)則摘要如下
The step base is the value returned by the following algorithm:
- 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" 之后亿笤,校驗規(guī)則就變成除以 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,成功達到目的掂铐。