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实现的批量图片预览加载功能
Aug 14 Javascript
也说JavaScript中String类的replace函数
Sep 22 Javascript
jquery和js实现对div的隐藏和显示方法
Sep 26 Javascript
最新最热最实用的15个jQuery插件汇总
Jul 05 Javascript
javascript动态生成树形菜单的方法
Nov 14 Javascript
jQuery+ajax读取并解析XML文件的方法
Sep 09 Javascript
canvas 弹幕效果(实例分享)
Jan 11 Javascript
微信小程序 本地图片按照屏幕尺寸处理
Aug 04 Javascript
在Node.js中将SVG图像转换为PNG,JPEG,TIFF,WEBP和HEIF格式的方法
Aug 22 Javascript
JS回调函数简单易懂的入门实例分析
Sep 29 Javascript
JavaScript实现捕获鼠标坐标
Apr 12 Javascript
vue打包npm run build时候界面报错的解决
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数组函数序列之array_key_exists() - 查找数组键名是否存在
2011/10/29 PHP
laravel withCount 统计关联数量的方法
2019/10/10 PHP
PHPUnit + Laravel单元测试常用技能
2019/11/06 PHP
Laravel等框架模型关联的可用性浅析
2019/12/15 PHP
Javascript 类与静态类的实现
2010/04/01 Javascript
关于jquery.validate1.9.0前台验证的使用介绍
2013/04/26 Javascript
Windows 系统下安装和部署Egret的开发环境
2014/07/31 Javascript
PHP中CURL的几个经典应用实例
2015/01/23 Javascript
js获取字符串字节数方法小结
2015/06/09 Javascript
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
2015/08/12 Javascript
jquery带动画效果幻灯片特效代码
2015/08/27 Javascript
jQuery+PHP+MySQL二级联动下拉菜单实例讲解
2015/10/27 Javascript
不得不分享的JavaScript常用方法函数集(上)
2015/12/23 Javascript
浅析AngularJS中的指令
2016/03/20 Javascript
bootstrap daterangepicker双日历时间段选择控件详解
2017/06/15 Javascript
nodeJS服务器的创建和重新启动的实现方法
2018/05/12 NodeJs
对vue中v-on绑定自定事件的实例讲解
2018/09/06 Javascript
原生JS无缝滑动轮播图
2019/10/22 Javascript
python Django连接MySQL数据库做增删改查
2013/11/07 Python
python将xml xsl文件生成html文件存储示例讲解
2013/12/03 Python
python开发环境PyScripter中文乱码问题解决方案
2016/09/11 Python
基于Python pip用国内镜像下载的方法
2018/06/12 Python
python 读取.csv文件数据到数组(矩阵)的实例讲解
2018/06/14 Python
python自定义函数实现一个数的三次方计算方法
2019/01/20 Python
Python箱型图绘制与特征值获取过程解析
2019/10/22 Python
吉力贝官方网站:Jelly Belly
2019/03/11 全球购物
全球性的在线商店:Vogca
2019/05/10 全球购物
银行实习自我鉴定
2013/10/12 职场文书
《列夫托尔斯泰》教学反思
2014/02/10 职场文书
2014年就业工作总结
2014/11/26 职场文书
2014年技术部工作总结
2014/12/12 职场文书
南湾猴岛导游词
2015/02/09 职场文书
2015年高校保卫处工作总结
2015/07/23 职场文书
2015年度个人工作总结报告
2015/10/24 职场文书
对Keras自带Loss Function的深入研究
2021/05/25 Python
nginx设置资源请求目录的方式详解
2022/05/30 Servers