javascript实现的简单的表单验证


Posted in Javascript onJuly 10, 2015

表单验证几乎是不可缺少的,有的表单验证是在后台完成的,有的则是使用JavaScript在在前端完成基本的验证,这样可以有效的减轻服务器的压力,下面就介绍一下JS实现的最简单的表单验证。代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>三水点靠木</title>
<script type="text/javascript"> 
function chkform(){ 
 if(document.getElementById("username").value==""){ 
  alert("用户名不能为空!"); 
  return false; 
 } 
 if(document.getElementById("pw").value=="") { 
  alert("密码不能为空!"); 
  return false; 
 } 
} 
</script> 
</head> 
<body> 
<form action="" name="myform"> 
 <table> 
  <tr> 
   <td>用户名:</td> 
   <td><input type="text" name="username" id="username" /></td> 
  </tr> 
  <tr> 
   <td>密码:</td> 
   <td><input type="password" name="pw" id="pw" /></td> 
  </tr> 
  <tr> 
   <td colspan="2"><input type="submit" value="提交"></td> 
  </tr> 
 </table> 
</form> 
</body> 
</html>

以上代码实现了最基本的表单验证,那就是不允许表单内容为空,下面就简单介绍一下它的实现过程:

一.在JavaScript代码中,创建chkform()函数用来验证表单,下面就简单介绍一下次函数:

document.getElementById("username").value

以上代码可以获得id为username的对象的值,然后通过if语句判断此值是否为空,如果为空则return false,这个语句非常重要,否则即使表单内容为空,表单也会被提交,也就达不到验证效果,第二个if判断语句的作用也是如此,这里就不介绍了。

二.onclick="return chkform()",此语句的作用是当点击提交按钮的时候就会执行chkform()函数用来验证表单,这里特别强调一点不要忘记添加return。

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
JavaScript中的Screen屏幕对象
Jan 16 Javascript
JavaScript 使用技巧精萃(.net html
Apr 25 Javascript
javascript 触发HTML元素绑定的函数
Sep 11 Javascript
javascript中的throttle和debounce浅析
Jun 06 Javascript
JavaScript中的console.log()函数详细介绍
Dec 29 Javascript
JavaScript函数参数使用带参数名的方式赋值传入的方法
Mar 19 Javascript
深入浅析JavaScript函数前面的加号和叹号
Jul 09 Javascript
JS实现线性表的链式表示方法示例【经典数据结构】
Apr 11 Javascript
vue2.0组件之间传值、通信的多种方式(干货)
Feb 10 Javascript
小程序tab页无法传递参数的方法
Aug 03 Javascript
jQuery实现颜色打字机的完整代码
Mar 19 jQuery
vue组件是如何解析及渲染的?
Jan 13 Vue.js
jQuery原生的动画效果
Jul 10 #Javascript
简述Jquery与DOM对象
Jul 10 #Javascript
JavaScript声明变量名的语法规则
Jul 10 #Javascript
JS控制表单提交的方法
Jul 09 #Javascript
JS获取下拉框显示值和判断单选按钮的方法
Jul 09 #Javascript
JavaScript的类型、值和变量小结
Jul 09 #Javascript
JS实现文档加载完成后执行代码
Jul 09 #Javascript
You might like
全国中波电台频率表
2020/03/11 无线电
php数据库连接
2006/10/09 PHP
PHP三元运算符的结合性介绍
2012/01/10 PHP
PHP中可以自动分割查询字符的Parse_str函数使用示例
2014/07/25 PHP
php字符串函数学习之strstr()
2015/03/27 PHP
PHP session会话操作技巧小结
2016/09/27 PHP
JQuery 学习笔记 选择器之三
2009/07/23 Javascript
Jquery中Ajax 缓存带来的影响的解决方法
2011/05/19 Javascript
IE6 hack for js 集锦
2014/09/23 Javascript
JS显示下拉列表框内全部元素的方法
2015/03/31 Javascript
jQuery插件slicebox实现3D动画图片轮播切换特效
2015/04/12 Javascript
完美解决node.js中使用https请求报CERT_UNTRUSTED的问题
2017/01/08 Javascript
使用angular帮你实现拖拽的示例
2017/07/05 Javascript
vue2.0+koa2+mongodb实现注册登录
2018/04/10 Javascript
NodeJS搭建HTTP服务器的实现步骤
2018/10/12 NodeJs
vue权限管理系统的实现代码
2019/01/17 Javascript
15分钟上手vue3.0(小结)
2020/05/20 Javascript
浅谈在vue-cli3项目中解决动态引入图片img404的问题
2020/08/04 Javascript
Vue 的 v-model用法实例
2020/11/23 Vue.js
[00:19]CN DOTA NEVER DIE!VG夺冠rOtK接受采访
2019/12/23 DOTA
用Python生成器实现微线程编程的教程
2015/04/13 Python
Windows下Anaconda的安装和简单使用方法
2018/01/04 Python
Python 中Pickle库的使用详解
2018/02/24 Python
Python实现常见的回文字符串算法
2018/11/14 Python
python画图的函数用法以及技巧
2019/06/28 Python
python实现复制文件到指定目录
2019/10/16 Python
在Python中预先初始化列表内容和长度的实现
2019/11/28 Python
python实现删除列表中某个元素的3种方法
2020/01/15 Python
Python爬虫基于lxml解决数据编码乱码问题
2020/07/31 Python
英国露营设备和户外服装购物网站:Simply Hike
2019/05/05 全球购物
沙特阿拉伯排名第一的在线时尚购物应用程序:1Zillion
2020/08/08 全球购物
static函数与普通函数有什么区别
2015/12/25 面试题
成品仓管员岗位职责
2013/12/11 职场文书
中学生学雷锋活动心得体会
2014/03/10 职场文书
mysql联合索引的使用规则
2021/06/23 MySQL
【海涛解说】pis亲自推荐,其实你从来不会玩NW
2022/04/01 DOTA