在没有表单发布的情况下触发 html5 验证

Question

我想在没有表单发布的情况下实现类似的功能，因为它会重定向页面。

这是我的代码

<form>
  <input type="number" step="any" min="0" required oninvalid="this.setCustomValidity('Please enter price with decimal format, eg x.xx .')">
  <button type="submit">submit</button>
</form>

我做了一些研究，它似乎必须通过表单发布来触发。可以使用 jquery 功能按钮单击触发 html5 验证吗？

Answer 1

html5 \xe2\x80\x9cpattern\xe2\x80\x9d 属性不适用于所有浏览器

\n\n

唯一的方法是使用 JavaScript 代码

\n\n

试试这个代码

\n\n

网页

\n\n

<input id="amount" maxlength="7" type="text" />\n

\n\n

JavaScript

\n\n

$("#amount").on("keyup", function(){\n    var valid = /^\\d{0,4}(\\.\\d{0,3})?$/.test(this.value),\n        val = this.value;\n\n    if(!valid){\n        alert("Please enter price with decimal format, eg x.xx!");\n        this.value = val.substring(0, val.length - 1);\n    }\n});\n

\n\n

避免在粘贴文本时接受无效输入（@le_m 的想法）

\n\n

尝试第二个解决方案：

\n\n

html

\n\n

<input id="amount" maxlength="7" type="text" />\n

\n\n

JS

\n\n

$("#amount").on("change paste keyup", function(){\n    var valid = /^\\d*(\\.\\d*)?$/.test(this.value),\n        val = this.value;\n\n    if(!valid){\n        alert("Please enter price with decimal format, eg x.xx!");\n        this.value = val.substring(0, val.length - 7);\n    }\n});\n

\n\n

结果：\n http://jsfiddle.net/vY39r/866/

\n