使用regEx验证输入字段不起作用

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，这样就可以了。

黑客解决方案

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

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

不要使用它，除非你的头部有枪，有人要求你调试他的代码而不改变HTML。使用类，这就是它们存在的原因。

Answer 2

HTML ID每页必须是唯一的。如果要使用相同的标识符选择多个元素，则应使用类。请记住，每个html元素可以有多个类。因此，对于您的示例，您可能希望拥有类似class='textbox name'的类属性。然后，您可以使用jquery $(.name)选择名称类的所有内容。

您可以在此处找到有关class vs id的更多信息：http://css-tricks.com/the-difference-between-id-and-class/

此外，如果您只是想限制输入中的字符数，那么javascript解决方案对您来说可能过度，因为您只需在输入上设置maxlength属性。