时间戳

首页 > 解决方案 > 通过事件对象检测输入模式验证

javascript - 通过事件对象检测输入模式验证

问题描述

有没有办法通过它的事件对象验证输入的模式（不使用表单）？

就像是：

<input type='email' onChange={e => e.isPatternOk} />

标签： javascripthtml

解决方案

打败我 :)，很高兴你弄清楚了

下面使用纯 css 和 js 解决方案，选择你喜欢的

.status * {
  display: none;
  margin-bottom: 20px;
}

input:valid+.status .valid {
  display: inline-block;
  background: limegreen;
}

input:invalid+.status .invalid {
  display: inline-block;
  background: red;
}
<input id="textfield" type="text" pattern=".{3,}" required/>
<div class="status">
  <span class="invalid">input is invalid</span>
  <span class="valid">input is valid</span>
</div>
<input type=button onclick="document.getElementById('js-result').innerHTML = 'Input is valid: '+ document.getElementById('textfield').validity.valid;" value="Check with JS" />
<fieldset>
  <legend>JS Result</legend>
  <div id="js-result"></div>
</fieldset>

推荐阅读