pattern 属性验证在 html 输入中输入的文本的频率

Question

当我使用模式进行输入字段验证时，验证值的频率。我想知道它是否会在 (keyup) 或 (change)

上验证

例如：

<input type="email" [(ngModel)]="emailAddress" name="emailAddress" data-toggle="tooltip"
                    title="{{emailAddress}}" #email="ngModel" multiple
                    pattern="^(([a-zA-Z0-9_,.]*@*\w+([-+.']\w+)*\w+([-.]\w+)*\.\w+([-.]\w+)*)*([' '])*)*$"
                    class="form-control" />

我想知道我输入的文本是否会在每次击键时得到验证？

Answer 1

只有在提交表单或在 input 标签上按回车时才会检查模式属性，因此您可能会说只有在 enter 键的笔画上才会检查。

如果您希望在每个keypress、keyup或onchange上验证它，您可以设置相应的属性来验证输入如下：

<input keyup="validate(this)" />

...

<script>
function validate(x)
{
    regex = /[a-zA-Z0-9]+/;
    window.alert(x.value.match(regex) == null);
}
</script>

Answer 2

如果我对你的问题的理解正确，你正在尝试检查“实时”输入的值。

在这种情况下，您可以使用 input 事件来更改值。

// Add error message element after input.
$('#input_email').after('<span class="error-message">Please write your message error here!</span>')

$('#input_email').on('input', function (evt) {
  var $regex=/^(([a-zA-Z0-9_,.]*@*\w+([-+.']\w+)*\w+([-.]\w+)*\.\w+([-.]\w+)*)*([' '])*)*$/;
  var value = evt.target.value;
  if (value.length === 0) {
    evt.target.className = ''
    return
  }
  
  var result = value.match($regex);
  
  if (result) {
    evt.target.className = 'valid'
  } else {
    evt.target.className = 'invalid'
  }
})

input.invalid + .error-message {
  display: initial;
}

.error-message {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input id="input_email" type="email" [(ngModel)]="emailAddress" name="emailAddress" data-toggle="tooltip"
                    title="{{emailAddress}}" #email="ngModel" multiple
                    pattern="^(([a-zA-Z0-9_,.]*@*\w+([-+.']\w+)*\w+([-.]\w+)*\.\w+([-.]\w+)*)*([' '])*)*$"
                    class="form-control" />

pattern 属性验证在 html 输入中输入的文本的频率

how frequently pattern attribute will be validating the text entered in html input

html

regex

onchange

keyup