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 相关文章推荐
js中通过split函数分割字符串成数组小例子
Sep 21 Javascript
js中继承的几种用法总结(apply,call,prototype)
Dec 26 Javascript
初识Javascript小结
Jul 16 Javascript
JS模拟实现方法重载示例
Aug 03 Javascript
Node中使用ES6语法的基础教程
Jan 05 Javascript
如何快速解决JS或Jquery ajax异步跨域的问题
Jan 08 jQuery
微信小程序--特定区域滚动到顶部时固定的方法
Apr 28 Javascript
vue的列表交错过渡实现代码示例
May 05 Javascript
js中let能否完全替代IIFE
Jun 15 Javascript
Vue 2.0 侦听器 watch属性代码详解
Jun 19 Javascript
js实现for循环跳过undefined值示例
Jul 02 Javascript
AngularJs的$http发送POST请求,php无法接收Post的数据问题及解决方案
Aug 13 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设计模式 Command(命令模式)
2011/06/26 PHP
php 参数过滤、数据过滤详解
2015/10/26 PHP
YII2 实现多语言配置的方法分享
2017/01/11 PHP
CakePHP框架Session设置方法分析
2017/02/23 PHP
PHP安装memcache扩展的步骤讲解
2019/02/14 PHP
PHP实现数组和对象的相互转换操作示例
2019/03/20 PHP
ThinkPHP3.1.2 使用cli命令行模式运行的方法
2020/04/14 PHP
对象的类型:本地对象(1)
2006/12/29 Javascript
javascript下过滤数组重复值的代码
2007/09/10 Javascript
FormValidate 表单验证功能代码更新并提供下载
2008/08/23 Javascript
javascript 一个函数对同一元素的多个事件响应
2009/07/25 Javascript
javascript AOP 实现ajax回调函数使用比较方便
2010/11/20 Javascript
为指定的元素添加遮罩层的示例代码
2014/01/15 Javascript
javascript瀑布流式图片懒加载实例
2020/06/28 Javascript
Angular Module声明和获取重载实例代码
2016/09/14 Javascript
jQuery实现的文字逐行向上间歇滚动效果示例
2017/09/06 jQuery
详解基于Vue cli生成的Vue项目的webpack4升级
2018/06/19 Javascript
如何在Vue中使用CleaveJS格式化你的输入内容
2018/12/14 Javascript
详解Vue webapp项目通过HBulider打包原生APP(vue+webpack+HBulider)
2019/02/02 Javascript
12个提高JavaScript技能的概念(小结)
2019/05/09 Javascript
python 字符串和整数的转换方法
2018/06/25 Python
python 读取文本文件的行数据,文件.splitlines()的方法
2018/07/12 Python
pygame实现成语填空游戏
2019/10/29 Python
Python使用Pyqt5实现简易浏览器(最新版本测试过)
2020/04/27 Python
keras用auc做metrics以及早停实例
2020/07/02 Python
记一次高分屏下canvas模糊问题
2020/02/17 HTML / CSS
Bealls Florida百货商店:生活服饰、家居装饰和鞋子
2018/02/23 全球购物
幼儿园家长会邀请函
2014/01/15 职场文书
高中班级口号
2014/06/09 职场文书
志愿者宣传口号
2014/06/17 职场文书
大学活动总结模板
2014/07/10 职场文书
人身损害赔偿协议书范本
2014/09/27 职场文书
医院办公室主任岗位职责
2015/04/01 职场文书
2019优秀干部竞聘演讲稿范文!
2019/07/02 职场文书
SpringBoot连接MySQL获取数据写后端接口的操作方法
2021/11/02 MySQL
CSS子盒子水平和垂直居中的五种方法
2022/07/23 HTML / CSS