我正在尝试学习HTML5并遇到以下问题。我想使用pattern输入关键字在用户输入时验证输入（例如，在按Tab键或从输入框更改焦点后进行验证）。
我尝试过以下方法：
<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。
免责声明： 我现在要说的就是适用于所有现代浏览器。在此上下文中，术语“现代浏览器”排除了IE9及更早版本。此外，Safari for Windows仅提供部分支持。
如果您只需要一个样式指示器，则可以使用纯CSS：
input[pattern]:invalid{
color:red;
}
使用模式时，onsubmit验证由浏览器自动完成（在Safari for Windows中不起作用）。
使用reportValidity（）
$('#test').on('input',function (e) {
e.target.setCustomValidity('')
if ($(this).val()>3) {
console.log('o~~~~error');
this.setCustomValidity('123')
// this.checkValidity()
this.reportValidity();
}
然后当#test输入大于3时，会有一个提示自动弹出
$('#test').on('input', function(e) {
this.setCustomValidity('')
if ($(this).val() > 3) {
this.setCustomValidity('wooo~~~~')
}
// e.target.checkValidity()
this.reportValidity();
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input autofocus id='test' type="text" min="1" pattern="[0-9]+" required>
<!-- <button type="submit">submit</button> -->
</form><input type="text" name="country" pattern="[A-z]{3}" oninput="this.reportValidity()" />
检查oninput位。
您可能希望检查旧浏览器，例如：
<input type="text" name="country" pattern="[A-z]{3}"
oninput="if (typeof this.reportValidity === 'function') {this.reportValidity();}"/>
以下jQuery代码将在每次更改输入时强制进行验证。
它拦截了oninput event元素上的<input...>。如果事件后该值无效，则撤消更改并恢复原始值。它还处理将无效值粘贴到字段中的情况。
data() function使用HTML5 data-attribute存储并检索元素的任何数据。该函数将原始值存储到元素data-last-valid中。
<script lang="text/javascript">
// First "input" means event type `oninput`, second "input" is the CSS selector.
// So read as "for all <input ...> elements set the event handler
// for the "oninput" event to the function...
$(document).on("input", "input", function (event) {
if (this.checkValidity()) {
// Store the current valid value for future use
$(this).data('last-valid', this.value);
}
else {
// Undo the change using the stored last valid value
this.value = $(this).data('last-valid') || "";
}
});
</script>
您应该使用keyup，focus和blur功能来实现您的需求。例如：
你有密码的输入字段：
<input id="pswd" type="password" required name="pswd" />
在JavaScript代码中：
$('input[type=password]').keyup(function() {
// keyup event code here with validation rules });
$('input[type=password]').focus(function() {
// focus code here to show message which contains rules for input field });
$('input[type=password]').blur(function() {
// blur code here });
如果您想使用jQuery将模式功能向后移植到IE8等旧版浏览器，您可以执行以下操作：
// Jquery Function to Validate Patterns on Input Objects
(function( $ ){
$.fn.validatePattern = function(search) {
// Get the current element's siblings
var pattern = this.attr('pattern');
var value = this.val();
return !(pattern&&(value.length>0)&&!value.match( new RegExp('^'+pattern+'$') ));
};
})( jQuery );
$(document).ready(function() {
// Bind pattern checking (invalid) to on change
$(':input').change(function() {
if (!$(this).validatePattern()) {
$(this).addClass('invalidPattern');
}
});
// Bind pattern valid to keyUp
$(':input').keyUp(function() {
if ($(this).validatePattern()) {
$(this).removeClass('invalidPattern');
}
});
});
这会将类invalidPattern添加到具有模式但与之不匹配的输入对象。您可能还希望添加对必需等的检查以及对表单的提交检查，以防止在模式未验证时提交。我上面提到的是一个快速，轻松的脚本，只验证模式。
如需更全功能的垫片，请查看http://adodson.com/jquery.form.js/
模式验证代码来自该项目。
你看过javascript'onkey'函数了吗？
如果你想要用户输入的东西，onkeyup可能就是你要找的那个。
另外，onchange在场失去焦点时发生，而onkeyup在用户输入时被触发。取决于你需要的。
你们很想尝试这样的事情：
onchange = variable.validate(this.value)
我的建议是防止用户首先在输入中输入无效字符，这样他们就不必返回并更正表单。
<label for="test">Only accepts 'a' characters</label>
<input id="test" type="text"
placeholder="aa" pattern="[a]{1,2}" maxlength="2"
oninput="if (!this.checkValidity()) this.value = this.value.slice(0, -1)" />