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 相关文章推荐
jQuery 解析xml文件
Aug 09 Javascript
js cookies实现简单统计访问次数
Nov 24 Javascript
JavaScript 设计模式之组合模式解析
Apr 09 Javascript
jQuery在iframe中无法弹出对话框的解决方法
Jan 12 Javascript
js对图片base64编码字符串进行解码并输出图像示例
Mar 17 Javascript
jquery滚动到顶部底部代码
Apr 20 Javascript
jQuery层动画定位滑动效果的方法
Apr 30 Javascript
js检测用户输入密码强度
Oct 22 Javascript
jQuery鼠标悬浮链接弹出跟随图片实例代码
Jan 08 Javascript
JavaScript地理位置信息API
Jun 11 Javascript
基于jQuery实现弹出可关闭遮罩提示框实例代码
Jul 18 Javascript
JS实现滑动拼图验证功能完整示例
Mar 29 Javascript
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
php Notice: Undefined index 错误提示解决方法
2010/08/29 PHP
ThinkPHP3.1新特性之Action参数绑定
2014/06/19 PHP
php+mysql实现数据库随机重排实例
2014/10/17 PHP
深入理解PHP内核(一)
2015/11/10 PHP
php中的登陆login实例代码
2016/06/20 PHP
[原创]php简单隔行变色功能实现代码
2016/07/09 PHP
ThinkPHP 3.2.3实现页面静态化功能的方法详解
2017/08/03 PHP
javascript中的prototype属性实例分析说明
2010/08/09 Javascript
Firefox和IE兼容性问题及解决方法总结
2013/10/08 Javascript
页面加载完毕后滚动条自动滚动一定位置
2014/02/20 Javascript
node.js中的console.trace方法使用说明
2014/12/09 Javascript
JavaScript类型系统之基本数据类型与包装类型
2016/01/06 Javascript
微信小程序 教程之小程序配置
2016/10/17 Javascript
jQuery实现一个简单的轮播图
2017/02/19 Javascript
Vim快速合并行及vim 将文件所有行合并到一行
2017/11/27 Javascript
vue 项目中使用Loading组件的示例代码
2018/08/31 Javascript
swiper在angularjs中使用循环轮播失效的解决方法
2018/09/27 Javascript
在vue中使用inheritAttrs实现组件的扩展性介绍
2020/12/07 Vue.js
[01:03:51]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第三场
2018/04/09 DOTA
[01:01:01]完美世界DOTA2联赛循环赛 GXR vs FTD BO2第一场 10.29
2020/10/29 DOTA
Django1.3添加app提示模块不存在的解决方法
2014/08/26 Python
Python实现二维数组按照某行或列排序的方法【numpy lexsort】
2017/09/22 Python
Python批量更改文件名的实现方法
2017/10/29 Python
使用Python完成15位18位身份证的互转功能
2019/11/06 Python
python 线性回归分析模型检验标准--拟合优度详解
2020/02/24 Python
python如何提取英语pdf内容并翻译
2020/03/03 Python
python中子类与父类的关系基础知识点
2021/02/02 Python
加大码胸罩、内裤和服装:Just My Size
2019/03/21 全球购物
安德玛比利时官网:Under Armour比利时
2019/08/28 全球购物
医院后勤自我鉴定
2013/10/13 职场文书
问卷调查计划书
2014/01/10 职场文书
2014年新教师工作总结
2014/11/08 职场文书
学校青年志愿者活动总结
2015/05/06 职场文书
2015年后备干部工作总结
2015/05/15 职场文书
2019年聘任书的写作格式及范文!
2019/07/03 职场文书
什么是动态刷新率DRR? Windows11动态刷新率功能介绍
2021/11/21 数码科技