如果输入值只是空白，则不会出现错误消息

Error message does not appear if input value is just blank space

本文关键字：消息 错误 输入 空白 如果      更新时间：2023-09-26

如果input值为空，我的JS函数在点击submit按钮时返回false。然而，如果input只是空白空间" "，它仍然返回false，但错误信息和input text border color不像输入值为空""时那样显示。

<form>
  <input id="textbox" type="text" required/>
  <input type="submit" id="btnSubmit" value="Save" />
</form>
JavaScript

var input = document.getElementById("textbox").value.trim();
if (input.length == 0) {
    return false;
}

您需要使用'pattern'属性并为至少一个字符指定一个正则表达式。

试

<input id="textbox" type="text" pattern="^'d*[a-zA-Z][a-zA-Z0-9]*$" required/>

以上模式

  • 0个或多个ASCII数字
  • 一个字母ASCII字符
  • 0个或多个字母数字ASCII字符

您实际上并没有进行验证。第一次验证是在使用HTML5 required属性时进行的。你实际上不用JS代码。我认为这就是你想达到的目的:

function checkInput(){
  var input = document.getElementById("textbox").value;
  if (input === '') {
      document.getElementById('error_message').style.display = 'block';
      document.getElementById('textbox').style.borderColor  = '#F00';
      return false;
  }else{
      document.getElementById('error_message').style.display = 'none';
      document.getElementById('textbox').style.borderColor  = '#000';
  }
}
#error_message{
  display: none;
}
<form method='post'>
  <input id="textbox" type="text"/>
  <input type="submit" id="btnSubmit" value="Save" onclick='checkInput();'/>
  <p id='error_message'>
  error message
  </p>
</form>

相关文章：