如何限制某些名称不能在 html 名称输入中使用或写入？

Question

我有一个像这样输入的名称：

<input type="text" name="name" placeholder="Your name">

如何在提交之前阻止在框中写入“admin”等名称或其他名称，但允许使用其他名称。

Answer 1

您可以使用 HTML5 属性实现相同的目的pattern（验证将在您按回车键后发生，即尝试提交表单）：<form><input type="text" name="name"&nbsp;pattern="(?!^[aA][dD][mM][iI][nN]([iI][sS][tT][rR][aA][tT][oO][rR])?$)(?!^root$).{3,20}"></form>这里接受长度在 3 到 20 个字符之间的任何内容，并且不是“admin”或“administrator”（不区分大小写）或“root”（小写）。

Answer 2

为此，您绝对应该使用某种形式的 JavaScript 验证。这是 jQuery 中的一个简单的答案。您可以向数组中添加任意数量的名称，然后检查输入的名称是否在数组中。如果您将表单提交到服务器，PHP 验证可能是最好的选择。$("#submitName").click(function() {&nbsp; var username = $("#name").val();&nbsp; if(username == ("admin" || "administrator")){&nbsp; &nbsp; $('.success-message').html("Name not allowed");&nbsp; &nbsp; //write code to preven form from submitting&nbsp; }else{&nbsp; &nbsp; $('.success-message').html("Submitted successfully");&nbsp; &nbsp; //write code to allow the form to submit&nbsp; }&nbsp;})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><input type="text" id="name" name="name" placeholder="Enter your name"><button type="submit" id="submitName">Submit name</button><div class="success-message"></div>

Answer 3

此代码片段演示了使用 JavaScript 的客户端方法。出于安全原因，请在服务器端再次检查这一点。function validate(){var inputVal = document.getElementById("name").value;invalidList=["admin","administrator"];if(invalidList.indexOf(inputVal) !== -1){&nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("val").innerHTML="Invalid";&nbsp; &nbsp; } else{&nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("val").innerHTML=inputVal;&nbsp; &nbsp; }}function validateSubmit(){var inputVal = document.getElementById("name").value;invalidList=["admin","administrator"];if(invalidList.indexOf(inputVal) !== -1){&nbsp; &nbsp; &nbsp; &nbsp; alert("Invalid");&nbsp; &nbsp; } else{&nbsp; &nbsp; &nbsp; &nbsp; alert("Success");&nbsp; &nbsp; }}<input type="text" id="name" name="name" placeholder="Your name" onkeyup="validate()"/><input type="button" onClick="validateSubmit()" value="Submit"/><div id="val"></div>