HTML5，如何在值更改时强制输入模式验证? [英] HTML5, how to force input pattern validation on value change?

问题描述

我正在尝试学习HTML5，并遇到了以下问题.我想使用 pattern 输入关键字在用户键入内容时验证输入(例如，在按Tab键或从输入框更改焦点后进行验证).

I am trying to learn HTML5 and came across the following. I would like to use the pattern input keyword to validate the input as the user types it (e.g. validation after pressing tab or changing focus from input box).

我尝试了以下操作:

<input name="variable" value="" tabindex="1" maxlength="13" required="required" pattern="${expectedValue}" onchange="this.variable.validate()" />  </li>

还有:

<input name="variable" value="" tabindex="1" maxlength="13" required="required" pattern="${expectedValue}" />  </li>

我为

onchange="this.variable.validate()" 

如何触发价值变更的验证?我只能执行 onSubmit .

How to trigger the validation on value change? I am able to do this only onSubmit.

推荐答案

_{免责声明:
我在这里要说的全部适用于所有现代浏览器.在此上下文中，术语现代浏览器"不包括IE9和更早版本.Safari Windows版也仅部分支持.}

_{Disclaimer:
All I am about to say here works for all modern browsers. The term "modern browser" in this context excludes IE9 and earlier. Also Safari for Windows has only partial support.}

如果您只需要样式指示器，则可以为此使用纯CSS:

If all you need is a styling indicator, you can use pure CSS for this:

input[pattern]:invalid{
  color:red;
}

使用模式时，浏览器会自动完成 onsubmit 验证(不适用于Windows的Safari).

When using pattern, the onsubmit validation is automatically done by the browser (does not work in Safari for Windows).

这篇关于HTML5，如何在值更改时强制输入模式验证?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！