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 LigerUI 使用教程表格篇(1)
Jan 18 Javascript
网页运行时提示对象不支持abigimage属性或方法
Aug 10 Javascript
JavaScript下的时间格式处理函数Date.prototype.format
Jan 27 Javascript
jQuery扩展实现text提示还能输入多少字节的方法
Nov 28 Javascript
JS实现的系统调色板完整实例
Dec 21 Javascript
AngularJS页面带参跳转及参数解析操作示例
Jun 28 Javascript
获取本机IP地址的实例(JavaScript / Node.js)
Nov 24 Javascript
原生JS实现循环Nodelist Dom列表的4种方式示例
Feb 11 Javascript
详解Vue CLI3配置解析之css.extract
Sep 14 Javascript
Node.js 路由的实现方法
Jun 05 Javascript
Vue退出登录时清空缓存的实现
Nov 12 Javascript
小程序实现密码输入框
Nov 16 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
discuz程序的PHP加密函数原理分析
2011/08/05 PHP
header跳转和include包含问题详解
2012/09/08 PHP
PHP PDOStatement::rowCount讲解
2019/02/01 PHP
2则自己编写的jQuery特效分享
2015/02/26 Javascript
javascript模块化简单解析
2016/04/07 Javascript
浅谈JavaScript中小数和大整数的精度丢失
2016/05/31 Javascript
jQuery 局部div刷新和全局刷新方法总结
2016/10/05 Javascript
JQuery页面随滚动条动态加载效果的简单实现(推荐)
2017/02/08 Javascript
COM组件中调用JavaScript函数详解及实例
2017/02/23 Javascript
JS实现的简单分页功能示例
2018/08/23 Javascript
Vue组件通信的几种实现方法
2019/04/25 Javascript
扫微信小程序码实现网站登陆实现解析
2019/08/20 Javascript
解决vue中的无限循环问题
2020/07/27 Javascript
vant 自定义 van-dropdown-item的用法
2020/08/05 Javascript
[01:51]2014DOTA2国际邀请赛 这个赛场没有失败者VGTi5再见
2014/07/23 DOTA
解读! Python在人工智能中的作用
2017/11/14 Python
浅谈Python采集网页时正则表达式匹配换行符的问题
2018/12/20 Python
django admin.py 外键,反向查询的实例
2019/07/26 Python
使用tqdm显示Python代码执行进度功能
2019/12/08 Python
Python turtle画图库&amp;&amp;画姓名实例
2020/01/19 Python
Django后端分离 使用element-ui文件上传方式
2020/07/12 Python
Django修改app名称和数据表迁移方案实现
2020/09/17 Python
java字符串格式化输出实例讲解
2021/01/06 Python
CSS3 实现图形下落动画效果
2020/11/13 HTML / CSS
美国网上购买眼镜:Eyeconic
2017/07/29 全球购物
速比涛英国官网:Speedo英国
2019/07/15 全球购物
sort命令的作用和用法
2012/11/04 面试题
夜大毕业自我鉴定
2013/10/11 职场文书
教师个人自我鉴定
2014/02/08 职场文书
车辆工程专业求职信
2014/04/28 职场文书
2015年元旦促销方案书
2014/12/09 职场文书
2019年员工旷工保证书!
2019/06/28 职场文书
新手必备之MySQL msi版本下载安装图文详细教程
2021/05/21 MySQL
Python中requests做接口测试的方法
2021/05/30 Python
SpringBoot中使用Redis作为全局锁示例过程
2022/03/24 Java/Android
Java实战之课程信息管理系统的实现
2022/04/01 Java/Android