如何使用 JavaScript 添加表单验证？

Question

我有 3 个字段需要验证

<form name='Login' method='post' target='_self'>
      <div class="loginPic"...>
         <input id="accountLoginField" class="loginEmail" type="text" name="account" value="" placeholder="">
         <input id="userLoginField" class="loginUsername" type="text" name="user" value="" placeholder="">
         <input id="passLoginField" class="loginPassword" type="password" name="password" value=""
                           placeholder=""> ....

并且我已提交输入

<input id="btn_login" type="submit" name="submit" class="buttonM bBlue" value="Connect">

如何检查这些字段是否为空并显示警告框？我尝试了在这里和其他网站上找到的不同方法，但 none 似乎有效...谢谢

Answer 1

以下示例将提交到实时测试服务器，响应将显示在 <iframe> 中以用于演示目的。客户端验证是最少的，当然服务器应该在验证方面做繁重的工作。以下是要点：

确保提交按钮在 <form> 内。如果由于某种原因不是，请向其添加 form="*"（"*" 是 <form> 的 ID）。尽管 <form> 有一个 name 是完全有效的，但是 id 更有用，所以在示例 <form id='login'...>.
每个字段都有一个 required 属性，因此可以在触发“提交”事件时对其进行验证，第一个空白 <input> 将弹出。
第一个 <input> type 已更改为 "email" 因此如果用户忘记 @.

<form id='login' action='https://httpbin.org/post' method='POST' target='response'>
  <fieldset>
    <input name="account" type="email" placeholder="Email address" required>
    <input name="user" type="text" placeholder='User name' required>
    <input name="password" type="password" placeholder="Password" required>
    <input type="submit" value="Connect">
  </fieldset>
</form>
<label>These two buttons are outside of form.</label><br>
<input type='submit' form='login' value='Works'>
<input type='submit' value="Doesn't Work"><br>
<iframe name='response'></iframe>

Answer 2

您可以使用 if 和 else 进行验证，并使用 values 属性进行检查，例如，您可以参考此示例代码，

        function validateform(){  
var name=document.myform.name.value;  
var password=document.myform.password.value;  
  
if (name==null || name==""){  
  alert("Name can't be blank");  
  return false;  
}else if(password.length<6){  
  alert("Password must be at least 6 characters long.");  
  return false;  
  }  
}  
</script>  
<body>  
<form name="myform" method="post" action="abc.jsp" onsubmit="return validateform()" >  
Name: <input type="text" name="name"><br/>  
Password: <input type="password" name="password"><br/>  
<input type="submit" value="register">  
</form>

同样，您可以检查每个字段。

如何使用 JavaScript 添加表单验证？

How to add a form validation using JavaScript?

javascript

validation