Question

我正在尝试学习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。

Answer 1

<子>的声明：
我现在要说的就是适用于所有现代浏览器。术语＆＃34;现代浏览器＆＃34;在这种情况下，不包括IE9和更早版本。 Safari for Windows 也只有部分支持。

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

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

使用模式时，浏览器会自动完成onsubmit验证（在Safari for Windows中无效）。

Answer 2

使用 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>

https://html.spec.whatwg.org/#dom-cva-reportvalidity

Answer 3

<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();}"/>

Answer 4

以下jQuery代码将在每次更改输入时强制进行验证。

它截取<input...>元素上的oninput event。如果事件后该值无效，则撤消更改并恢复原始值。它还处理将无效值粘贴到字段中的情况。

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>

Answer 5

您应该使用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    });

Answer 6

如果您想使用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/

模式验证代码来自该项目。

Answer 7

您是否看过javascript的'onkey'功能？

如果您想要用户输入的内容，

onkeyup可能就是您要找的那个。

此外，当字段失去焦点时会发生onchange，而当用户键入时会触发onkeyup。取决于你需要的。

你们很想尝试这样的事情：

onchange = variable.validate(this.value)

Answer 8

我的建议是防止用户首先在输入中输入无效字符，这样他们就不必返回并更正表格。

<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)" />

HTML5，如何在值变化时强制输入模式验证？

8 个答案: