Question

我想在输入中只接受字母，数字和连字符（破折号）。在PHP中，我这样做：

if(!preg_match("/^[A-Za-z0-9-]+$/", $input)) {
    echo "Only letters, numbers, and hyphens are allowed.";
}

如何在vanilla javascript中实现同样的功能？如果它不可能在纯JavaScript中，我怎么能在jquery中做到这一点？感谢

Answer 1

改编自Sylvain的答案：jQuery only allow numbers,letters and hyphens。

注意：jQuery几乎是vanilla js的包装器，可以使许多常见语句如Document.querySelectorAll()更短，通常可以安全地假设jQuery可以直接转换为vanilla js（我可以＆＃39;想一想jQuery功能不同的任何例子。

您可以做的是选择表单中的所有输入（或您想要的任何一个），然后针对正则表达式测试它们的值（Sylvain使用正则表达式选择所需字符的倒数，使其为{{ 1}}如果有一个无效的字符）并且如果它有任何禁止的字符阻止表单提交并做一些其他事情要求用户解决问题。

＆＃13;

true

＆＃13;

document.getElementById("formWhitelistedChars").addEventListener("submit", function(e) {
    // Get all inputs in the form we specifically are looking at, this selector can be
    // changed if this is supposed to be applied to specific inputs
    var inputs = document.querySelectorAll('#formWhitelistedChars input');
    var forbiddenChars = /[^a-z\d\-]/ig;
    
    // check all the inputs we selected
    for(var input of inputs) {
        // Just in case the selector decides to do something weird
        if(!input) continue;
        
        // Check that there aren't any forbidden chars
        if(forbiddenChars.test(input.value)) {
            // This line is just to do something on a failure for Stackoverflow
            // I suggest removing this and doing something different in application
            console.log('input ' + input.name + ' has forbidden chars.');
            
            // Do stuff here

            // Prevent submit even propagation (don't submit)
            e.preventDefault();
            return false;
        }
    }
});

＆＃13;

编辑：将<form id="formWhitelistedChars"> <input name="1" /> <input name="2" /> <button type="submit">Submit</button> </form>替换为0-9作为评论中提及的@ibrahimmahrir

EDIT2：将输入侦听器更改为表单提交

Answer 2

您可以使用/{criteria}/{flags}开始新的正则表达式。你的正则表达式将翻译成这样的东西：

/^[aA-zZ0-9-]+$/g.test(/* value to test here*/)

在输入中只允许使用字母，数字和连字符？

2 个答案: