html 修改输入为数字,HTML5输入类型=数字更改步骤行为

Rafik Tighil..

5

好吧，首先感谢您提出这个非常有趣的问题。通过搜索问题的解决方案，我已经学到了很多有关HTML5验证的知识。

我的研究使我发现HTML5表单验证API具有一组有趣的属性，这些属性是只读的，但是对完成您想做的事情非常有用。

我对您的问题的解决方法是先将novalidate属性添加到form元素，以便我可以控制何时触发验证，然后读取validity附加到输入的对象，这样我才能确切知道那里存在哪些验证错误，以及是否知道唯一的错误是stepMismatch(这是引发数字无效(例如199)的原因)，我可以绕过所有验证过程。另外，我可以使用reportValidity()方法显示正常的HTML验证行为。

这是我想出的代码，希望您能做得到：

var form = document.querySelector("form") // Get the form

var input = document.querySelector("#myInput") // Get the input to validate

form.addEventListener("submit", function(e) {

e.preventDefault() // Catch the submit

// Do the magic

if(onlyStepMatters(input.validity)){

form.submit()

}else {

form.reportValidity()

}

})

function onlyStepMatters(validityState) {

return !(

validityState.badInput || validityState.customError || validityState. patternMismatch || validityState.rangeOverflow || validityState.rangeUnderflow || validityState.tooLong || validityState.tooShort || validityState.typeMismatch || validityState.valueMissing

)

/* This is what the object looks like, notice I just skipped the stepMismatch */

/*

{

badInput,

customError,

patternMismatch,

rangeOverflow,

rangeUnderflow,

stepMismatch,

tooLong,

tooShort,

typeMismatch,

valid,

valueMissing,

}

*/

}

Send

我很确定可以基于相同的逻辑来重构此代码并使其更加简洁，但是我没有足够的时间来思考它。

任何建设性的意见将不胜感激。

希望这可以帮助。