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的实现回车键Enter切换焦点
Sep 14 Javascript
js和jquery使按钮失效为不可用状态的方法
Jan 26 Javascript
js获取会话框prompt的返回值的方法
Jan 10 Javascript
jQuery前端开发35个小技巧
May 24 Javascript
js控件Kindeditor实现图片自动上传功能
Jul 20 Javascript
jQuery中ztree 点击文本框弹出下拉框的实例代码
Feb 05 Javascript
Bootstrap Table从零开始
Jun 30 Javascript
使用mock.js随机数据和使用express输出json接口的实现方法
Jan 07 Javascript
利用Vue实现一个markdown编辑器实例代码
May 19 Javascript
Node.js中出现未捕获异常的处理方法
Jun 29 Javascript
如何在selenium中使用js实现定位
Aug 18 Javascript
JavaScript实现点击出现子菜单效果
Feb 08 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中常用编辑器推荐
2007/01/02 PHP
PHP的范围解析操作符(::)的含义分析说明
2011/07/03 PHP
一个基于phpQuery的php通用采集类分享
2014/04/09 PHP
我整理的PHP 7.0主要新特性
2016/01/07 PHP
php 判断过去离现在几年的函数(实例代码)
2016/11/15 PHP
excel操作之Add Data to a Spreadsheet Cell
2007/06/12 Javascript
常用Extjs工具:Extjs.util.Format使用方法
2012/03/22 Javascript
JS的replace方法详细介绍
2012/11/09 Javascript
js中的this关键字详解
2013/09/25 Javascript
nodejs URL模块操作URL相关方法介绍
2015/03/03 NodeJs
Immutable 在 JavaScript 中的应用
2016/05/02 Javascript
Angular.js中控制器之间的传值详解
2017/04/24 Javascript
原生js的ajax和解决跨域的jsonp(实例讲解)
2017/10/16 Javascript
前后端常见的几种鉴权方式(小结)
2019/08/04 Javascript
[40:19]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第二场 12.18
2020/12/19 DOTA
[01:32:22]DOTA2-DPC中国联赛 正赛 Ehome vs VG BO3 第一场 2月5日
2021/03/11 DOTA
利用PyInstaller将python程序.py转为.exe的方法详解
2017/05/03 Python
python GUI库图形界面开发之PyQt5单选按钮控件QRadioButton详细使用方法与实例
2020/02/28 Python
让IE6支持css3,让 IE7、IE8 都支持CSS3
2011/10/09 HTML / CSS
详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用
2020/08/24 HTML / CSS
野兽派官方旗舰店:THE BEAST 野兽派
2016/08/05 全球购物
Smallable意大利家庭概念店:设计师童装及家居装饰
2018/01/08 全球购物
Desigual德国官网:在线购买原创服装
2018/03/27 全球购物
Gucci法国官方网站:意大利奢侈品牌
2018/07/25 全球购物
荣耀俄罗斯官网:HONOR俄罗斯
2020/10/31 全球购物
小学母亲节活动方案
2014/03/14 职场文书
主持人演讲稿
2014/05/13 职场文书
开展创先争优活动总结
2014/08/28 职场文书
英语四级考试作弊检讨书
2014/09/29 职场文书
春晚观后感
2015/06/11 职场文书
幼儿园庆元旦主持词
2015/07/06 职场文书
2016年4月份红领巾广播稿
2015/12/21 职场文书
幼儿园教师辞职信
2019/06/21 职场文书
员工保密协议范本,您一定得收藏!很有用!
2019/08/08 职场文书
浅谈MySQL之浅入深出页原理
2021/06/23 MySQL
Python中time标准库的使用教程
2022/04/13 Python