Question

我只允许输入字母，数字和下划线作为输入。我当前的代码（如下）仅返回破折号和空格错误。

function myFunction() {
  var x = document.getElementById("myText").value;
  document.getElementById("demo").innerHTML = x;
  
  //for space
  var n = x.includes(" ");
  document.getElementById("demo").innerHTML = n;
  
  //for dash
  var d = x.includes("-");
  document.getElementById("demo").innerHTML = d;

  if (d == true && n == true) {
    document.getElementById("demobox").innerHTML = 'MISTAKE!!! CAMPAIGN NAME INCLUDES SPACE & DASH!!!';
    document.getElementById('demobox').style.backgroundColor = "#AA0000";
  } else if (n == true) {
    document.getElementById("demobox").innerHTML = 'MISTAKE!!! CAMPAIGN NAME INCLUDES SPACE!!!';
    document.getElementById('demobox').style.backgroundColor = "#AA0000";
  } else if (d == true) {
    document.getElementById("demobox").innerHTML = 'MISTAKE!!! CAMPAIGN NAME INCLUDES DASH!!!';
    document.getElementById('demobox').style.backgroundColor = "#AA0000";
  } else {
    document.getElementById("demobox").innerHTML = 'GOOD TO GO!';
    document.getElementById('demobox').style.backgroundColor = "#008000";
  }
}

<h3>Campaign Name Checker</h3>
<input id="myText" placeholder="Please enter Campaign Name Here to check if campaign name includes space(s) or dash(s)">
<div id="demobox"></div>
<p>Example: Ingles_Monroe_XXX89000_OXX_V2_Video</p>
<button onclick="myFunction()">Check it!</button>
<p id="demo"></p>

Answer 1

<h3 style="font-family: Onyx; color: white; font-size: 33px; text-align: center;">Campaign Name Checker</h3>

<div style="text-align: center;"><input size="111" name="Giris" id="myText" value="Please enter Campaign Name Here to check if campaign name includes space(s) or dash(s)">
</div>

<div style="text-align: center;" id="demobox"></div>
<p style="color: white; text-align: center;">Example: Ingles_Monroe_XXX89000_OXX_V2_Video</p>
<div style="text-align: center;"><big style="font-family: monospace;"><button onclick="myFunction()">Check it!</button></big></div>




<p style="color: rgb(0, 64, 98);" id="demo"></p>

<script>
  function myFunction() {
    var x = document.getElementById("myText").value;
    document.getElementById("demo").innerHTML = x;
    // if includes somthing other then _ letters digits
    if (x.search(/[^_a-z\d]/i) !== -1) {
      document.getElementById("demobox").innerHTML = 'MISTAKE!!! CAMPAIGN NAME HAS INCORRECT FORMAT!!!';
      document.getElementById('demobox').style.backgroundColor = "#AA0000";
    } else {
      document.getElementById("demobox").innerHTML = 'GOOD TO GO!';
      document.getElementById('demobox').style.backgroundColor = "#008000";
    }






  }
</script>

您可以使用/[^_a-z\d]/i正则表达式来捕获NOT（下划线，字母，数字）

如果要在错误中显示哪个符号不正确，请改用match：

<h3 style="font-family: Onyx; color: white; font-size: 33px; text-align: center;">Campaign Name Checker</h3>

<div style="text-align: center;"><input size="111" name="Giris" id="myText" value="Please enter Campaign Name Here to check if campaign name includes space(s) or dash(s)">
</div>

<div style="text-align: center;" id="demobox"></div>
<p style="color: white; text-align: center;">Example: Ingles_Monroe_XXX89000_OXX_V2_Video</p>
<div style="text-align: center;"><big style="font-family: monospace;"><button onclick="myFunction()">Check it!</button></big></div>




<p style="color: rgb(0, 64, 98);" id="demo"></p>

<script>
  function myFunction() {
    var x = document.getElementById("myText").value;
    document.getElementById("demo").innerHTML = x;
    // if includes somthing other then _ letters digits
    var result = x.match(/[^_a-z\d]/i)
    if (result) {
      document.getElementById("demobox").innerHTML = 'MISTAKE!!! CAMPAIGN NAME HAS "' + result[0] + '"!!!';
      document.getElementById('demobox').style.backgroundColor = "#AA0000";
    } else {
      document.getElementById("demobox").innerHTML = 'GOOD TO GO!';
      document.getElementById('demobox').style.backgroundColor = "#008000";
    }
  }
</script>

Answer 2

您还可以使用HTML5表单字段验证，一些JavaScript来自定义错误消息，以及使用CSS伪类来确定有效和无效状态。

请注意，正则表达式位于pattern元素的input属性中。

// Add submit listener to the form element
document.getElementById("myForm")
  .addEventListener('submit',
    function(e){
      e.preventDefault();
      alert('valid name');
    }
  );

// Attach some custom HTML5 validation messages to myText
var myText = document.getElementById('myText');

myText.oninvalid = function(e) {
    e.target.setCustomValidity('');
    if (!e.target.validity.valid) {
        e.target.setCustomValidity('Use only letters, numbers, and underscores');
    }
};

myText.oninput = function(e) {
  e.preventDefault();
  e.target.setCustomValidity('');
};

input {
  border: 1px solid #000;
  width: 350px;
  height: 30px;
  font-size: 16px;
}
input::placeholder { color: white; }
input:invalid { background-color: #AA000080; }
input:valid { background-color: #00AA0080; }

<h3>Campaign Name Checker</h3>
<form id="myForm">
  <input
    required
    id="myText"
    placeholder="Use only letters, numbers, and underscores"
    pattern="[\d\w_]+"
  >
  <div id="demobox"></div>
  <p>Example: Ingles_Monroe_XXX89000_OXX_V2_Video</p>
  <button type="submit">Check it!</button>
</form>
<p id="demo"></p>

Answer 3

您可以在删除冗余代码（如var demo = document.getElementById("demo");之类的缓存变量）后尝试这种方式。我想这个简单的逻辑将帮助您了解自己的问题。 通过我也可以使用正则表达式方式，例如/[a-z0-9_]/i，它仅接受字母，数字和下划线，但不会清除您当前对混乱的理解。

function myFunction() {
  var x = document.getElementById("myText").value;
  var demobox = document.getElementById("demobox");
  var demo = document.getElementById("demo");
  demo.innerHTML = x;
  
  //for space
  var n = x.includes(" ");
  demo.innerHTML = n;
  
  //for dash
  var d = x.includes("-");
  demo.innerHTML = d;


  if (d == true && n == true) {
    demobox.innerHTML = 'MISTAKE!!! CAMPAIGN NAME INCLUDES SPACE & DASH!!!';
    demobox.style.backgroundColor = "#AA0000";
    
  } else if (n == true) {
    demobox.innerHTML = 'MISTAKE!!! CAMPAIGN NAME INCLUDES SPACE!!!';
    demobox.style.backgroundColor = "#AA0000";

  } else if (d == true) {
    demobox.innerHTML = 'MISTAKE!!! CAMPAIGN NAME INCLUDES DASH!!!';
    demobox.style.backgroundColor = "#AA0000";
    
  } else {
    demobox.innerHTML = 'GOOD TO GO!';
    demobox.style.backgroundColor = "#008000";
  }

}

<h3 style="font-family: Onyx; color: black; font-size: 33px; text-align: center;">Campaign Name Checker</h3>

<div style="text-align: center;" id="demobox"> </div>
<p style="color: black; text-align: center;">Example: Ingles_Monroe_XXX89000_OXX_V2_Video</p>
<div style="text-align: center;"><big style="font-family: monospace;">
Campaign Name: <input type="text" id="myText"/>
<button onclick="myFunction()">Check it!</button></big></div>
<p style="color: rgb(0, 64, 98);" id="demo"></p>

使用“ getElementById”仅允许输入字母，数字和下划线

3 个答案: