Question

我正在制作一个视频游戏，玩家需要选择用户名（最多15个字符），我将pattern上的input属性用作第一级验证。我将以下代码用作第二级验证，以防万一有人尝试更改HTML。

HTML

<form id="guest-form">
    <div class="login-text">Choose a username:</div>
    <input id="guest-username" pattern=".{1,15}" title="max 15 characters" required="required" type="text">
    <input class="login-button" type="submit" value="Play">
</form>

JS

document.getElementById("guest-form").onsubmit = function(e) {
    e.preventDefault();
    var username = document.getElementById("guest-username").value;
    if (username.length > 15) {
        document.getElementById("guest-username").setAttribute("pattern", ".{1,15}");
        document.getElementById("guest-form").submit();
    }
}

如果他们确实更改了HTML，则表单将使用原始属性重新提交，并显示错误。

问题在于，提交表单后，页面会重新加载

我尝试过：

document.getElementById("guest-form").submit(function(e) {
    e.preventDefault()
});

无论有什么解决方案，我都不想在不需要时创建自定义错误消息。

Answer 1

如果您不想在提交后重新加载页面，只需使用XHR将表单发送到服务器并处理响应。 XHR

在表单的onsubmit函数内提交相同的表单

1 个答案: