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

Question

when i am doing a input field validation using pattern , how frequently the value will be validated . i would like to know whether it will validate on (keyup) or (change)

for ex:

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

i would like to know whether the text i enter will be validated on each keystroke ?

Answer 1

The pattern attribute is checked only upon submission the form or when you press enter on the input tag, so only on the enter key's stroke you might say.

If you want it to be validated on every keypress , keyup or onchange , you can set the corresponding attribute to validate the input like so:

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

...

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

Answer 2

If I understand correctly your issue, you are trying to check the value entered "real time".

In the case, you could use input event to get value changed.

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