javascript - 如何在验证前修改HTML5表单数据？

Question

我正在尝试以简单的搜索形式重用 HTML5 验证required(因此一个输入)。这正是我所需要的(浏览器语言的验证消息、样式、不允许前进等)。我缺少的是 trim 输入字符串，因此不允许用户仅提交空格。

我已经做了研究，onsubmit 事件似乎触发得太晚，无法修改任何内容。我也无法对实际输入进行任何更改，因此这些输入必须在整个过程中保持完整(就像经典验证一样)。

有没有办法用普通的 HTML5 来解决这个问题，而不使用像 jQuery 这样的库？

编辑:使用pattern属性不是这里的解决方案，因为它具有与此字段不能为空不同的错误消息。

Answer 1

你可以尝试一些类似的事情

<form method = "post">
    <input type = "text" required pattern=".*[^ ].*" oninvalid="setCustomValidity('Please fill out this field')"
    onchange="try{setCustomValidity('')}catch(e){}"/>
    <input type = "submit" />
</form>

否则，如果您真的非常需要只使用 required 属性，那么这样的东西就适合您

<form method = "post">
    <input type = "text" required oninput = "if(this.value.trim() == '') { this.value = '' }"/>
    <input type = "submit" />
</form>