Question

我想用香草javascript制作表格。当id="text"的值什么都不是时，我想在其中弹出警报，我用if语句代替它，但似乎在这里的代码中不起作用

var input = document.getElementById('text');
function check(){
    if(input.value == " "){
        alert('hello');
    }
}

 Username: <input name="fname" type="text" onsubmit="check()" id="text" placeholder="Enter your username"> <br>
<button type="submit">asd</button>

Answer 1

每次用户单击时，您都需要获取字段值-如果您的初始代码不在元素之后，则您的代码将失败，因为document.getElementById('text');将是未定义的
输入字段没有onsubmit事件
我建议也有一个value属性，并在测试前对其进行修剪

您可能是这个意思

document.getElementById("form1").addEventListener("submit", function(e) {
  var input = document.getElementById('text');
  if (input.value.trim() == "") {
    alert('Please fill in user name');
    input.focus();
    e.preventDefault(); // stop form submission
  }
});

<form action="yourserverprocess" id="form1">
  Username: <input name="fname" type="text" 
             id="text" placeholder="Enter your username" value="" /><br />
  <button type="submit">Send</button>
</form>

没有表格

document.getElementById("subbut").addEventListener("click", function(e) {
  var input = document.getElementById('text'), val = input.value.trim();
  if (val == "") {
    alert('Please fill in user name');
    input.focus();
  }
  else {
    console.log("You typed",val);
  }
});

Username: <input name="fname" type="text" 
             id="text" placeholder="Enter your username" value="" /><br />
<button id="subbut" type="button">Send</button>

Answer 2

这是您的问题的解决方案。
我对您的代码进行了一些更改。
1.您必须在表单标签中放置onsubmit事件。因为不支持onsubmit事件。 2.将函数名称从check（）更改为checkAlert（）。可能是check是一个库关键字，它会导致您的代码失败。

var input = document.getElementById('text');

function checkAlert() {
	if(input.value == ""){
    alert('hello');
  }
}

<form onsubmit = "checkAlert(this)">
   Username: <input name="fname" type="text" id="text" placeholder="Enter your username"> <br>
  <button type="submit">asd</button>
</form>

用香草javascript制作表格

2 个答案: