Question

我正在使用JS进行一些非常基本的表单验证。我不希望用户能够在输入字段上使用任何特殊字符作为防御XSS漏洞的一层。

我已经完成了基本的验证，它似乎工作正常，但它只是说有一个错误，我想突出显示无效字符。这是我的代码。

HTML

<head><meta charset="UTF-8"><script src="script.js"></script></head>
<body>

<form method="post" action="test.php" onsubmit="return validate()">
    <p><input type="text" id="userName" placeholder="Username or Email"></p>
    <p><input type="password" id="userEmail" placeholder="Password"></p>
    <p><input type="submit" id="submit" value="Login"></p>
</form>

<input type="button" value="debug" onclick="debug()">

<p id="errorText"></p>
<p id="debug"></p>
</body>

的Javascript

<script>

    function validate() {
    var userName = document.getElementById('userName').value;
    var userEmail = document.getElementById('userEmail').value;
    var invalidChars = "!,@,#,$,%,^,&,*,(,),<,>,/,~,`";
    var mergeFields = userName.concat(userEmail);
    var found = "false";
    var invCharsArr = invalidChars.split(",");
    var fieldsArr = mergeFields.split("");
    var nameErr = "false";
    var emailErr = "false";

    for (var i = 0; i < fieldsArr.length; i++) {
            if (invCharsArr.indexOf(fieldsArr[i]) > -1) {
            found = "true";
            break;
            }
    }

    if (found == "true") {
        document.getElementById('errorText').innerHTML = "You used an invalid character";
        return false;
    }
    else {
        if (userName == "" || userName == null) {
            document.getElementById('userName').style.backgroundColor = "red";
            document.getElementById('errorText').innerHTML = "Field Errors are Highlighted in Red";
            nameErr = "true";
            return false;
        }
        else if (userEmail == "" || userEmail == null) {
            document.getElementById('userEmail').style.backgroundColor = "red";
            document.getElementById('errorText').innerHTML = "Field Errors are Highlighted in Red";
            emailErr = "true";
            return false;
        }
        else {
            return true;
        }
    }

    }

</script>

另一方面，我仍然是javascript的初学者，如果这里有什么我可以做得更好，请让我知道我想学习。感谢

Answer 1

您可以在输入标记一些字符的情况下显示错误消息，方法是将它们包裹在跨度中。据我所知，在输入字段上执行此操作是不可能的。

<div class="error">Invalid chars in: <span class="mark">#</span>test</div>.

如前所述，您不应仅依赖于javascript验证。它主要有助于防止向服务器发送不必要的错误请求。

Javascript表单验证突出显示无效字符

1 个答案: