javascript - 使用正则表达式验证输入字段不起作用

Question

我被要求验证我们的输入字段。通过这种方式，我限制了您可以在输入字段中填写的字符。每当我添加一些数据并且我对所有数据使用一个 id 时，我的输入字段就会增加。

它适用于第一行，但其余行则无效。有什么建议如何修复它吗？

            echo""
            . "<form action=maintenance.php method=POST>"
            . "<tr>"
            . "<td><input class='textbox' type=text id='name' name=name value='" . $record['name'] . "'> </td>"
            . "<td><input class='textbox' size=50 id='url' type=url name=url value='" . $record['url'] . "'></td>"
            . "<td><textarea class=textbox rows=2 cols=50 wrap=physical id=desc name=desc>" . strip_tags($record['description']) . "</textarea></td>"
            . "<input type=hidden name=hidden value='" . $record['name'] . "'>"
            . "<td><button class='btn-style-icons shrink' type=submit name=update><img src=icons/update.png alt=Update></button></td>"
            . "<td><button class='btn-style-icons shrink' type=submit name=delete><img src=icons/delete.png alt=Delete></button></td>"
            . "</tr>"
            . "</form>";
        }
        echo""
        . "</table>"
        . "<table>"
        . "<form action=maintenance.php method=POST>"
        . "<tr>"
        . "<td><input class='textbox' id='name' type=text name=iname></td>"
        . "<td><input class='textbox' id='url' size= 50 url=url name=iurl></td>"
        . "<td><textarea class=textbox id=desc rows=2 cols=50 name=idesc></textarea></td>"
        . "<td><button class='btn-style-icons shrink' type=submit name=add id=add><img src=icons/add.png alt=Add></button></td>"
        . "</tr>"
        . "</form>"
        . "</table>";

它是这样的:

action.js

$(document).ready(function () {
    $('#name').bind('keypress', function (event) {
        var regex = new RegExp("^[a-zA-Z0-9 \b\t]+$");
        var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
        if (!regex.test(key)) {
            event.preventDefault();
            return false;
        }
    });

    $('#url').bind('keypress', function (event) {
        var regex = new RegExp("^[a-zA-Z0-9://. \b\t]+$");
        var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
        if (!regex.test(key)) {
            event.preventDefault();
            return false;
        }
    });
});

Answer 1

好的解决方案

ID 必须是唯一的，因此不要使用 id="name" 或 id="url"，而是使用 class="name"和class="url"。之后，您可以将选择器更改为 .name 和 .url，它将起作用。

黑客解决方案

如果由于某种原因您想要无效的 HTML 并重复您的 ID，您可以利用 jQuery 并在选择器之前插入一个空格。它将返回超过 1 个元素。

$(' #name')
$(' #url')

不要使用它，除非你有枪指着你的头，并且有人要求你在不更改 HTML 的情况下调试他的代码。使用类，这就是它们存在的原因。