【网页设计】验证表单是否为空

最新推荐文章于 2021-06-04 11:14:00 发布

原创最新推荐文章于 2021-06-04 11:14:00 发布 · 2.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#网页设计 #表单 #验证密码为空

程序代码同时被 2 个专栏收录

83 篇文章

订阅专栏

网页设计

3 篇文章

订阅专栏

本文介绍了一个简单的JavaScript表单验证方法，用于确保用户在登录时输入的账号和密码不为空。通过示例展示了如何使用JavaScript检查表单字段，并给出提示。

在做登录注册页面的时候，需要检测用户是否合法输入，其中重要的一条就是，验证表单的信息是否为空

下面以一个账号密码登录表单为例，说一下用Javascript的一个解决方案

JavaScript中的函数：

<script type="text/javascript">
  function     validate()   
     {   
          if(document.myform.username.value=="")   
          {   
                  alert("用户名不能为空.");   
                  document.myform.username.focus();   
                  return   false   ;   
          }   
  if(document.myform.password.value=="")   
          {   
                  alert("密码不能为空.");   
                  document.myform.password.focus();   
                  return   false   ;   
          }   

         return true;   
     }   
</script>

Htnl表单

<form action="load" method="post" name="myform" id="myform"  onsubmit="return validate()"> 
<input type="text" name="username" style="width:190px; height:26px;"/><br/>
<input type="password" name="password" style="width:190px; height:26px; margin-top:12px;"/><br/>
<input type="submit" value="登录" style="width:50px; height:30px; margin-top:8px;"/>
</form>

获取username的另外方式：
var username=document.getElememntByID('username').value;

设置焦点的另外方式：
document.getElementById("username").focus();