有没有一种方法可以只接受字母输入而不是数字?如果输入了数字,它应该显示验证错误,因为它只接受字母。

4

我正在创建一个表单,其中包含特定字段。目前,一个文本输入框。

我尝试使用"required"进行验证,但这不是我要寻找的内容。如果用户输入数字,则应验证它只接受字母。

<form action="/action_page.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit">
</form>

你能帮我吗?当我在文本框中输入时,如何快速完成此操作并验证是否输入了数字。


请阅读 https://developer.mozilla.org/zh-CN/docs/Web/API/Document/keydown_event。 - Spangle
3个回答

5
您可以使用以下方式进行验证。
<form action="/action_page.php">
  First name: <input type="text" pattern="[A-Za-z]" name="fname"><br>
  Last name: <input type="text" pattern="[A-Za-z]" name="lname"><br>
  <input type="submit" value="Submit">
</form>
字段只接受字母输入,可通过JQuery进行验证。
<!DOCTYPE html>

        <html lang="en">
            <head>
                <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
            </head>
            <body>
               First name <input type="text" pattern="[A-Za-z]" id="fname" name="fname"><br>
               Last name <input type="text" pattern="[A-Za-z]" id="lname" name="lname"><br>
                <script>
                    $( document ).ready(function() {
                        $( "#fname" ).keypress(function(e) {
                            var key = e.keyCode;
                            if (key >= 48 && key <= 57) {
                                e.preventDefault();
                            }
                        });
                        $( "#lname" ).keypress(function(e) {
                            var key = e.keyCode;
                             if (key >= 48 && key <= 57) {
                                e.preventDefault();
                            }
                         });
                    });
                </script>
            </body>
        </html>

请注意,这全部是客户端的。人们可以轻松地删除它并提交数字。因此,如果您的后端期望没有任何数字的字符串,则还需要在 PHP 中进行验证。 - Merijndk

1

Try the snippet below:

if (!/^([^0-9]*)$/.test($(input).val())) {
  alert("This only accepts alphabets!");
}
else
{
  //submit
}

使用正则表达式验证输入值,然后只需弹出警告通知客户端。另一种替代方法是在按键时立即禁用数字。
    $("input").keypress(function (e) {
    if (!/^([^0-9]*)$/.test(e.key)) {
        return false;
    }
});

1
使用模式。
<form action="/action_page.php">
  First name: <input type="text" pattern="[A-Za-z]" name="fname"><br>
  Last name: <input type="text" pattern="[A-Za-z]" name="lname"><br>
  <input type="submit" value="Submit">
</form>

模式属性指定一个正则表达式,用于在表单提交时检查元素的值。


谢谢。实际上我正在寻找同样的东西,但有点不同。比如说,我想在输入时显示验证,或者当我们进入下一个字段时,它应该提醒只能输入字母而不能输入数字。 - rey

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接