如何限制某些名称不使用或写入 html 名称输入?

Question

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

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

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

Answer 1

您可以使用HTML5属性pattern实现相同的效果(验证将在您点击返回后进行，即尝试提交表单(：

<form>
<input type="text" name="name"
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() {
var username = $("#name").val();
if(username == ("admin" || "administrator")){
$('.success-message').html("Name not allowed");
//write code to preven form from submitting
}else{
$('.success-message').html("Submitted successfully");
//write code to allow the form to submit
} 
})

<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){
document.getElementById("val").innerHTML="Invalid";
} else{
document.getElementById("val").innerHTML=inputVal;
}
}
function validateSubmit()
{
var inputVal = document.getElementById("name").value;
invalidList=["admin","administrator"];
if(invalidList.indexOf(inputVal) !== -1){
alert("Invalid");
} else{
alert("Success");
}
}

<input type="text" id="name" name="name" placeholder="Your name" onkeyup="validate()"/>
<input type="button" onClick="validateSubmit()" value="Submit"/>
<div id="val"></div>