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 BS,dialog控件自适应大小
Jul 06 Javascript
用JavaScript玩转游戏物理(一)运动学模拟与粒子系统
Jun 19 Javascript
javascript HTML5文件上传FileReader API
Mar 27 Javascript
BootStrap 智能表单实战系列(十)自动完成组件的支持
Jun 13 Javascript
jQuery实现的网格线绘制方法
Jun 20 Javascript
让浏览器崩溃的12行JS代码(DoS攻击分析及防御)
Oct 10 Javascript
Jquery Easyui表单组件Form使用详解(30)
Dec 19 Javascript
JS对象是否拥有某属性如何判断
Feb 03 Javascript
node.js+jQuery实现用户登录注册AJAX交互
Apr 28 jQuery
新手简单了解vue
May 29 Javascript
js实现购物车商品数量加减
Sep 21 Javascript
Vue 实现一个简单的鼠标拖拽滚动效果插件
Dec 10 Vue.js
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中websocket的使用方法
2016/09/15 PHP
thinkphp5.0自定义验证规则使用方法
2017/11/16 PHP
jQuery防止click双击多次提交及传递动态函数或多参数
2014/04/02 Javascript
javascript 对象数组根据对象object key的值排序
2015/03/09 Javascript
JavaScript实现MIPS乘法模拟的方法
2015/04/17 Javascript
基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)
2016/08/29 Javascript
js 提交form表单和设置form表单请求路径的实现方法
2016/10/25 Javascript
layui弹出层效果实现代码
2017/05/19 Javascript
Vue的Flux框架之Vuex状态管理器
2017/07/30 Javascript
js中el表达式的使用和非空判断方法
2018/03/28 Javascript
Echarts之悬浮框中的数据排序问题
2018/11/08 Javascript
详解key在Vue列表渲染时究竟起到了什么作用
2019/04/20 Javascript
vue组件命名和props命名代码详解
2019/09/01 Javascript
浅谈layui框架自带分页和表格重载的接口解析问题
2019/09/11 Javascript
[00:02]DOTA2新版本使用PA至宝后暴击展示
2014/11/19 DOTA
在Python中操作列表之List.append()方法的使用
2015/05/20 Python
使用python爬取B站千万级数据
2018/06/08 Python
Python3中bytes类型转换为str类型
2018/09/27 Python
Python实现定制自动化业务流量报表周报功能【XlsxWriter模块】
2019/03/11 Python
python openpyxl使用方法详解
2019/07/18 Python
Python高级property属性用法实例分析
2019/11/19 Python
150行python代码实现贪吃蛇游戏
2020/04/24 Python
python 实现超级玛丽游戏
2020/11/25 Python
英国最大的高品质珠宝和手表专家:Goldsmiths
2017/03/11 全球购物
俄罗斯电动工具和设备购物网站:Vseinstrumenti.ru
2020/11/12 全球购物
简述安装Slackware Linux系统的过程
2012/01/12 面试题
初一英语教学反思
2014/01/11 职场文书
蜜蜂引路教学反思
2014/02/04 职场文书
孩子教育的心得体会
2014/09/01 职场文书
师德师风整改措施
2014/10/24 职场文书
2015年公民道德宣传日活动总结
2015/03/23 职场文书
2015年学生资助工作总结
2015/05/25 职场文书
南极大冒险观后感
2015/06/05 职场文书
运动会加油稿50字
2015/07/21 职场文书
解决sql server 数据库,sa用户被锁定的问题
2021/06/11 SQL Server
Ruby处理CSV数据方法详解
2022/04/18 Ruby