jQuery对输入框进行验证,只允许输入字母和数字

2023-09-19 10:45:51 浏览数 (2)

使用jQuery来对这两个输入框进行验证,确保只允许输入字母和数字,不允许输入中文字符。 以下是相应的示例代码:

代码语言:javascript复制
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
        
    </head>
    <body>
        <input type="text" class="form-control" placeholder="定位手环、卡片编号" id="deviceId" />
        <input type="text" class="form-control" placeholder="请输入NFC编号" id="nfcId" />

        <script>
            $(document).ready(function() {
                // NFC编号输入框验证
                $("#nfcId").on("input", function(event) {
                    var inputValue = event.target.value;
                    var regex = /^[a-zA-Z0-9] $/; // 只允许字母和数字

                    if (!regex.test(inputValue)) {
                        event.target.value = inputValue.replace(/[^w]/g, ''); // 删除非字母和数字的字符
                    }
                });

                // 终端编号输入框验证
                $("#deviceId").on("input", function(event) {
                    var inputValue = event.target.value;
                    var regex = /^[a-zA-Z0-9] $/; // 只允许字母和数字

                    if (!regex.test(inputValue)) {
                        event.target.value = inputValue.replace(/[^w]/g, ''); // 删除非字母和数字的字符
                    }
                });
            });
        </script>
    </body>
</html>

$(document).ready()来在文档加载完成后执行代码。 分别选择了ID为nfcId和deviceId的输入框,并绑定了input事件监听器。 当用户输入内容时,会使用正则表达式/^[a-zA-Z0-9] $/对输入内容进行验证。 如果输入内容不符合要求(包含非字母和数字的字符,包括中文), 则会将非法字符删除。

0 人点赞