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具有使用pattern属性验证数据的本机方式。所以你的代码是：

编辑： pattern属性不适用于输入类型编号。如果您想选择此选项，请选择使用类型文本。该模式将处理您的设置。致@le_m评论。

简单示例：（需要两种十进制格式）：

<input type="text" pattern="\d+(\.\d{2})?" step="any" min="0" required oninvalid="this.setCustomValidity('Please enter price with decimal format, eg x.xx .')">

Rebust示例（演示说明：http://regex101.com/r/uG5lI0/1）

<input type="text" pattern="/^(\d*([.,](?=\d{3}))?\d+)+((?!\2)[.,]\d\d)?$/" step="any" min="0" required oninvalid="this.setCustomValidity('Please enter price with decimal format, eg x.xx .')">

有关pattern属性的更多信息：

Answer 2

在输入更改时设置自定义验证消息并拦截表单提交事件：

var form = document.querySelector('form'),
    input = document.querySelector('#input-price');

input.addEventListener("change", function (event) {
  if (!input.checkValidity() || !/^\d+(\.\d+)?$/.test(input.value)) {
    input.setCustomValidity("Please enter price with decimal format, eg x.xx .");
  } else {
    input.setCustomValidity("");
  }
});

form.addEventListener("submit", function (event) {
  event.preventDefault();
});

<form>
  <input id="input-price" type="number" step="any" min="0" required>
  <input type="submit">
</form>

当输入值为input.checkValidity()，2和.1时的数字时，

1e10会返回true。然后，正则表达式测试将最后两种情况（.1和1e10）过滤掉。

Answer 3

html5“pattern”属性不适用于所有浏览器

唯一的方法是使用JavaScript代码

试试这段代码

Html

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

的javaScript

$("#amount").on("keyup", function(){
    var valid = /^\d{0,4}(\.\d{0,3})?$/.test(this.value),
        val = this.value;

    if(!valid){
        alert("Please enter price with decimal format, eg x.xx!");
        this.value = val.substring(0, val.length - 1);
    }
});

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

尝试第二个解决方案：

html

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

JS

$("#amount").on("change paste keyup", function(){
    var valid = /^\d*(\.\d*)?$/.test(this.value),
        val = this.value;

    if(!valid){
        alert("Please enter price with decimal format, eg x.xx!");
        this.value = val.substring(0, val.length - 7);
    }
});

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

触发html5验证，无需表单发布

3 个答案:

html5“pattern”属性不适用于所有浏览器

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