使用JavaScript进行表单必填项目验证和改进

最新推荐文章于 2024-05-11 02:50:29 发布

这个角度有点胖

最新推荐文章于 2024-05-11 02:50:29 发布

阅读量546

点赞数 2

本文链接：https://blog.csdn.net/qq_43679366/article/details/86173747

版权

在网页提交表单的呃时候，往往需要进行表单的必填项进行验证，下面我们以两个例子来写一下对表单的必填项进行

认证的两个例子，第二个例子是对第一个例子进行的改进。

首先是最基本的最简单的表单必填项的实例代码

<!DOCTYPE html><html>  <head>    <title>确认表单必填项完整性</title>     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="this is my page">    <meta http-equiv="content-type" content="text/html; charset=UTF-8">        <script type="text/javascript">          function $(str){      return (document.getElementById(str));     }          function check_submit(){      if($("username").value ==""){       alert("请填写用户名!");       return false;      }      if($("password").value == ""){       alert("请填写密码!");       return false;      }     }    </script>      </head>    <body>    <form action="" onsubmit="return check_submit();">     用户名:<input id="username" type="text"><br/>     密　码:<input id="password" type="password"><br/>     <input type="submit" value="提交">    </form>  </body></html>

下面是对表单的验证进行了改进

<!DOCTYPE html><html>  <head>    <title>更加人性化表单</title>     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="this is my page">    <meta http-equiv="content-type" content="text/html; charset=UTF-8">        <script type="text/javascript">         function $(str){      return (document.getElementById(str));     }          function check_submit(){      if($("username").value =="" || $("username").value=="请输入用户名"){       alert("用户名不能为空!");       return false;      }      if($("password").value ==""){       alert("密码不能为空！");       return false;      }     }          function mover(){      event.srcElement.focus();      event.srcElement.select();     }          function mclick(){      if(event.srcElement.value=="请输入用户名")       event.srcElement.value="";     }          function mblur(){      if(event.srcElement.value=="")       event.srcElement.value="请输入用户名";     }    </script>     </head>    <body>    <form action="" onsubmit="return check_submit();">     用户名:<input id="username" type="text" onmouseover="mover();" onclick="mclick();"      onblur="mblur();" value="请输入用户名"><br/>     密　码:<input id="password" type="password" onmouseover="mover();"><br/>     <input type="submit" value="提交" id="submit">          </form>  </body></html>

当表单的用户名输入框鼠标划过的时候，触发事件，然后自动选中事件，当失去焦点的时候，检测里面的值是否为

空，如果为空就返回原来的值。应该说是比较大的改进。

再分享一下我老师大神的人工智能教程吧。零基础！通俗易懂！风趣幽默！还带黄段子！希望你也加入到我们人工智能的队伍中来！https://blog.csdn.net/jiangjunshow