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 常用代码技巧大收集
Feb 25 Javascript
jQuery满意度星级评价插件特效代码分享
Aug 19 Javascript
Jquery效果大全之制作电脑健康体检得分特效附源码下载
Nov 02 Javascript
JavaScript资源预加载组件和滑屏组件的使用推荐
Mar 10 Javascript
jQuery实现下拉加载功能实例代码
Apr 01 Javascript
JS区分浏览器页面是刷新还是关闭
Apr 17 Javascript
bootstrap实现图片自动轮播
Dec 21 Javascript
vue-router 学习快速入门
Mar 01 Javascript
JS实现小球的弹性碰撞效果
Nov 11 Javascript
JavaScript实现数字前补“0”的五种方法示例
Jan 03 Javascript
微信小程序中为什么使用var that=this
Aug 27 Javascript
JavaScript函数柯里化
Nov 07 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 透明水印生成代码
2012/08/27 PHP
下拉列表多级联动dropDownList示例代码
2013/06/27 PHP
关于JavaScript中var声明变量作用域的推断
2010/12/16 Javascript
基于JQuery实现异步刷新的代码(转载)
2011/03/29 Javascript
Javascript中的window.event.keyCode使用介绍
2011/04/26 Javascript
Node.js入门教程:在windows和Linux上安装配置Node.js图文教程
2014/08/14 Javascript
AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录
2015/01/02 Javascript
JS实现横向与竖向两个选项卡Tab联动的方法
2015/09/27 Javascript
js制作网站首页图片轮播特效代码
2016/08/30 Javascript
JS不完全国际化&amp;本地化手册 之 理论篇
2016/09/27 Javascript
jquery操作ID带有变量的节点实例
2016/12/07 Javascript
jQuery实现级联下拉框实战(5)
2017/02/08 Javascript
BootStrap select2 动态改变值的方法
2017/02/10 Javascript
基于Vue中点击组件外关闭组件的实现方法
2018/03/06 Javascript
修改Nodejs内置的npm默认配置路径方法
2018/05/13 NodeJs
微信小程序实现指定显示行数多余文字去掉用省略号代替
2018/07/25 Javascript
Vue过渡效果之CSS过渡详解(结合transition,animation,animate.css)
2020/02/05 Javascript
es6函数name属性功能与用法实例分析
2020/04/18 Javascript
Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)
2020/05/15 Javascript
Angular5整合富文本编辑器TinyMCE的方法(汉化+上传)
2020/05/26 Javascript
[40:03]Liquid vs Optic 2018国际邀请赛淘汰赛BO3 第一场 8.21
2018/08/22 DOTA
Django添加favicon.ico图标的示例代码
2018/08/07 Python
Python统计学一数据的概括性度量详解
2020/03/03 Python
Python 捕获代码中所有异常的方法
2020/08/03 Python
python中使用np.delete()的实例方法
2021/02/01 Python
html通过canvas转成base64的方法
2019/07/18 HTML / CSS
html5贪吃蛇游戏使用63行代码完美实现
2013/06/25 HTML / CSS
Wojas罗马尼亚网站:波兰皮鞋品牌
2018/11/01 全球购物
单位介绍信范文
2014/01/18 职场文书
教师开学感言
2014/02/14 职场文书
采购助理岗位职责
2014/02/16 职场文书
领导班子三严三实心得体会
2014/10/13 职场文书
2015年公司国庆放假通知
2015/07/30 职场文书
决心书格式范文
2015/09/23 职场文书
Django中session进行权限管理的使用
2021/07/09 Python
Vue组件更新数据v-model不生效的解决
2022/04/02 Vue.js