Question

我正在使用javascript创建一个简单的验证表单，但我的代码存在问题。我有一个用户名和密码输入字段。我想要的是当我提交表单时，如果其中一个字段为空，不将表单转到数据库，而是留在页面上并显示输入旁边的“请填写此字段”的范围。我该如何解决这个问题？

感谢。

HTML代码：

<form action="#" method="post">
    <label for="username">Username</label>
    <input type="text" id="username" name="username">
    <span id="userspan">please fill in this field</span>

    <br>

    <label for="userpassword">Password</label>
    <input type="password" id="userpassword" name="userpassword">

    <br>

    <input type="submit" id="usersubmit" onsubmit="myFunction();">
</form>

CSS代码：

#userspan {
    display:none;
}

使用Javascript：

var username = document.getElementById("username").value;
var userpassword = document.getElementById("userpassword").value;
var userspan = document.getElementById("userspan");
var var usersubmit = document.getElementById("usersubmit");


function myFunction() {
    if ( username == "" || userpassword == "" ) {
        userspan.style.display="block";
        return false;
    }else {
        return true;
    }
}

Answer 1

将提交输入框更改为：

    <input type="button" id="usersubmit" onclick="myFunction();">

并在myFunction()声明之前添加到return true声明的末尾。

    document.getElemenById("username").form.submit();

...原因是因为submit输入按钮将提交表单，无论如何，如果您使用button输入类型，它不提交表单，您可以然后控制何时从myFunction()

中提交表单

您还可以在代码中找到：

var var usersubmit = document.getElementById("usersubmit");

表示var var usersubmit

Javascript示例：

<script>
  function myFunction() {
    var username = document.getElementById("username").value;
    var userpassword = document.getElementById("userpassword").value;
    if ((username == "") || (userpassword == "")) {
      userspan.style.display = "block";
      return false;
    } else {
      document.getElementById("username").form.submit();
      return true;
    }
  }
</script>
<form action="#" method="post">
  <label for="username">Username</label>
  <input type="text" id="username" name="username">
  <span id="userspan">please fill in this field</span>

  <br>

  <label for="userpassword">Password</label>
  <input type="password" id="userpassword" name="userpassword">

  <br>

  <input type="button" id="usersubmit" onclick="myFunction();" value="submit">
</form>

不使用任何javascript的另一种方式：

  <form action="#" method="post">
      <label for="username">Username</label>
      <input type="text" id="username" name="username" required>
      <span id="userspan">please fill in this field</span>

      <br>

      <label for="userpassword">Password</label>
      <input type="password" id="userpassword" name="userpassword" required>

      <br>

      <input type="submit" id="usersubmit" >
    </form>

Answer 2

将onsubmit事件替换为像这样的

更改

<input type="submit" id="usersubmit" onsubmit="myFunction();">

到

<form action="#" onsubmit="return myFunction();" method="post">

function myFunction() {
	var username = document.getElementById("username").value;
	var userpassword = document.getElementById("userpassword").value;
	var useralert = document.getElementById("username_required");
	var passalert = document.getElementById("password_required");

  if (username=="" && userpassword=="") {
  	useralert.style.display="block";
  	passalert.style.display="block";
    return false;
  }
  else if (username!='' && userpassword=="") {
  	useralert.style.display="none";
  	passalert.style.display="block";
    return false;
  }
  else if (username=='' && userpassword!="") {
  	useralert.style.display="block";
  	passalert.style.display="none";
    return false;
  }
  else {
  	useralert.style.display="none";
  	passalert.style.display="none";
  	alert('Your records has been submit!');
    return true;
  }
}

.alert {
    	display:none;
    	color: red;
		}

<form action="#" onsubmit="return myFunction();" method="post">
	<table border="0" cellpadding="5" cellspacing="1">
		<tr>
			<td valign="top"><label for="username">Username :</label></td>
			<td>
				<input type="text" id="username" name="username">
				<span class="alert" id="username_required">Please fill in this field</span>
			</td>
		</tr>
		<tr>
			<td valign="top"><label for="userpassword">Password :</label></td>
			<td>
				<input type="password" id="userpassword" name="userpassword">
	    	<span class="alert" id="password_required">Please fill in this field</span>
			</td>
		</tr>
		<tr>
			<td>&nbsp;</td>
			<td><input type="submit" id="usersubmit" value="Submit"></td>
		</tr>
	</table>
</form>

Javascript验证表单问题

2 个答案: