表单验证几乎在每个需要注册或者是登录的网站都是必不可少,下面通过本篇文章给大家介绍 JavaScript 表单验证实例之验证表单项是否为空,涉及到 js 表单验证实例相关知识,对 js 表单验证实例代码需要的朋友一起学习吧
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
表单验证几乎在每一个需要注册或者登陆的网站是必不可少的,有些验证则非常的复杂,可以说是各种各样给你的要求,不过本章节只介绍一下表单中最简单的验证方式,就是判断是否为空,有些要求比较低的网站对此已经满足需要了。
代码如下:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset=" utf-8">
- <meta name="author" content="http://www.phperz.com/" />
- <title>
- js简单表单验证
- </title>
- <script type="text/javascript">
- window.onload = function() {
- var bt = document.getElementById("bt");
- bt.onclick = function() {
- if (document.myform.name.value == "") {
- alert("用户名不能为空!");
- document.myform.name.focus();
- return false;
- } else if (document.myform.pw.value == "") {
- alert("密码不能为空!");
- document.myform.pw.focus();
- return false;
- }
- }
- }
- </script>
- </head>
- <body>
- <form action="index.php" method="get" name="myform">
- <ul>
- <li>
- 姓名:
- <input type="text" name="name" id="name" />
- </li>
- <li>
- 密码:
- <input type="text" name="pw" id="age" />
- </li>
- <li>
- <input type="submit" id="bt" />
- </li>
- </ul>
- </form>
- </body>
- </html>
以上代码,当点击提交按钮的时候,能够进行简单的表单验证,如果表单项为空,那么就会弹出提示,并且将焦点放入当前表单项,代码比较简单,这里距不多介绍了,可以参阅相关阅读。
下面在来看下 js 验证表单实例代码:
gspan.html
- <html>
- <head>
- <title>
- 表单验证实例
- </title>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-" />
- <script src="check.js" type="text/javascript">
- </script>
- <style>
- span{ font-size:px; } .stats{ color : #ccc; } .stats{ color :black; }
- .stats{ color :red; } .stats{ color :green; }
- </style>
- </head>
- <body>
- <form method="post" action="reg.php" onsubmit="return regs('click')">
- 用户名:
- <input type="text" name="username" />
- <span class="stats">
- 用户名不能为空
- </span>
- <br/>
- 邮箱:
- <input type="text" name="email" />
- <span class="stats">
- 邮箱不能为空
- </span>
- <br/>
- 密码:
- <input type="password" name="password" />
- <span class="stats">
- 密码不能为空
- </span>
- <br/>
- 确认密码:
- <input type="password" name="chkpass" />
- <span class="stats">
- 密码不能为空
- </span>
- <br/>
- <input type="submit" />
- </form>
- </body>
- </html>
check.js
来源: http://www.phperz.com/article/17/0216/267637.html