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 相关文章推荐
ExtJS 2.0实用简明教程 之Border区域布局
Apr 29 Javascript
JavaScript 加号(+)运算符号
Dec 06 Javascript
jQuery对html元素取值与赋值的方法
Nov 20 Javascript
封装了一个支持匿名函数的Javascript事件监听器
Jun 05 Javascript
使用EVAL处理jqchart jquery 折线图返回数据无效的解决办法
Nov 26 Javascript
jquery拖动层效果插件用法实例分析(附demo源码)
Apr 28 Javascript
JS自定义函数实现时间戳转换成date的方法示例
Aug 27 Javascript
详解JavaScript事件循环机制
Sep 07 Javascript
微信小程序实现滑动操作代码
Apr 23 Javascript
JS实现audio音频剪裁剪切复制播放与上传(步骤详解)
Jul 28 Javascript
vue根据条件不同显示不同按钮的操作
Aug 04 Javascript
vue 项目软键盘回车触发搜索事件
Sep 09 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
我的论坛源代码(一)
2006/10/09 PHP
async和DOM Script文件加载比较
2014/07/20 PHP
Centos下升级php5.2到php5.4全记录(编译安装)
2015/04/03 PHP
PHP判断来访是搜索引擎蜘蛛还是普通用户的代码小结
2015/09/14 PHP
jQuery学习笔记之DOM对象和jQuery对象
2010/12/22 Javascript
javascript中String类的subString()方法和slice()方法
2011/05/24 Javascript
使用AngularJS来实现HTML页面嵌套的方法
2015/06/17 Javascript
AngularJS 单元测试(二)详解
2016/09/21 Javascript
微信开发 微信授权详解
2016/10/21 Javascript
jQuery中$.grep() 过滤函数 数组过滤
2016/11/22 Javascript
JQuery实现列表中复选框全选反选功能封装(推荐)
2016/11/24 Javascript
vue.js学习之递归组件
2016/12/13 Javascript
canvas 实现中国象棋
2017/02/17 Javascript
微信小程序 template模板详解及实例代码
2017/03/09 Javascript
js时间查询插件使用详解
2017/04/07 Javascript
jQuery条件分页 代替离线查询(附代码)
2017/08/17 jQuery
vue-router+vuex addRoutes实现路由动态加载及菜单动态加载
2017/09/28 Javascript
JS常用的几种数组遍历方式以及性能分析对比实例详解
2018/04/11 Javascript
vue-cli 打包使用history模式的后端配置实例
2018/09/20 Javascript
npm 常用命令详解(小结)
2019/01/17 Javascript
js实现表格数据搜索
2020/08/09 Javascript
[39:46]完美世界DOTA2联赛PWL S2 LBZS vs Rebirth 第二场 11.25
2020/11/25 DOTA
Python中__call__用法实例
2014/08/29 Python
跟老齐学Python之字典,你还记得吗?
2014/09/20 Python
Python如何调用JS文件中的函数
2019/08/16 Python
python为Django项目上的每个应用程序创建不同的自定义404页面(最佳答案)
2020/03/09 Python
pycharm-professional-2020.1下载与激活的教程
2020/09/21 Python
Madewell美德威尔美国官网:美国休闲服饰品牌
2016/11/25 全球购物
牦牛毛户外探险服装:Kora
2019/02/08 全球购物
幼师岗位求职简历的自荐信格式
2013/09/21 职场文书
群众路线教育实践活动心得体会
2014/03/07 职场文书
个人委托书范本汇总
2014/10/01 职场文书
2014年超市员工工作总结
2014/11/18 职场文书
Python正则表达式中flags参数的实例详解
2022/04/01 Python
WIN10使用IIS部署ftp服务器详细教程
2022/08/05 Servers
Python中np.random.randint()参数详解及用法实例
2022/09/23 Python