如何限制某些名称不能在 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>