如何防止用户在输入形式中输入@符号？

Question

我正试图阻止用户输入电子邮件地址来输入文本。

如果点击提交，我可以阻止它，但是当用户键入时，我想在提交之前阻止它。

因此，我需要在用户键入“ @”符号时显示自定义验证消息。 因此，用户无法输入“ @” 并显示自定义验证消息。

<form action="">
<input type="text" name="username" id="username" required placeholder=""
pattern="^[^@]+$" oninvalid="this.setCustomValidity('Please type username, not your mail address.')"
oninput="this.setCustomValidity('')" />
<input type="submit">
</form>