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 相关文章推荐
七个很有意思的PHP函数
May 12 Javascript
js获取input长度并根据页面宽度设置其大小及居中对齐
Aug 22 Javascript
Jquery插件实现点击获取验证码后60秒内禁止重新获取
Mar 13 Javascript
web前端开发JQuery常用实例代码片段(50个)
Aug 28 Javascript
JavaScript数组的栈方法与队列方法详解
May 26 Javascript
JavaScript必知必会(二) null 和undefined
Jun 08 Javascript
jQuery实现动态生成表格并为行绑定单击变色动作的方法
Apr 17 jQuery
基于vue开发微信小程序mpvue-docs跳转页面功能
Apr 10 Javascript
微信小程序-form表单提交代码实例
Apr 29 Javascript
javascript 构建模块化开发过程解析
Sep 11 Javascript
JavaScript编写开发动态时钟
Jul 29 Javascript
ant design vue嵌套表格及表格内部编辑的用法说明
Oct 28 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 中文处理技巧
2010/04/25 PHP
PHP中copy on write写时复制机制介绍
2014/05/13 PHP
PHP使用flock实现文件加锁的方法
2015/07/01 PHP
几个比较实用的JavaScript 测试及效验工具
2010/04/18 Javascript
Javascript模块化编程(一)模块的写法最佳实践
2013/01/17 Javascript
jquery三个关闭弹出层的小示例
2013/11/05 Javascript
Javascript技术栈中的四种依赖注入详解
2016/02/23 Javascript
jquery zTree异步加载、模糊搜索简单实例分享
2016/03/24 Javascript
JavaScript实战(原生range和自定义特效)简单实例
2016/08/21 Javascript
NodeJS遍历文件生产文件列表功能示例
2017/01/22 NodeJs
Bootstrap中data-target 到底是什么
2017/02/14 Javascript
javascript实现数据双向绑定的三种方式小结
2017/03/09 Javascript
简单快速的实现js计算器功能
2017/08/17 Javascript
详解vue-cli 构建Vue项目遇到的坑
2017/08/30 Javascript
谈谈vue中mixin的一点理解
2017/12/12 Javascript
使用Electron构建React+Webpack桌面应用的方法
2017/12/15 Javascript
细说webpack源码之compile流程-rules参数处理技巧(1)
2017/12/26 Javascript
vue地区选择组件教程详解
2018/05/04 Javascript
浅谈layui数据表格判断问题(加入表单元素),设置单元格样式
2019/10/26 Javascript
如何区分vue中的v-show 与 v-if
2020/09/08 Javascript
Python采集腾讯新闻实例
2014/07/10 Python
Python的Flask框架中使用Flask-Migrate扩展迁移数据库的教程
2016/06/14 Python
Django中日期处理注意事项与自定义时间格式转换详解
2018/08/06 Python
Python爬虫之pandas基本安装与使用方法示例
2018/08/08 Python
python IDLE 背景以及字体大小的修改方法
2019/07/12 Python
用Python+OpenCV对比图像质量的几种方法
2019/07/15 Python
Css3新特性应用之视觉效果实例
2016/12/12 HTML / CSS
北美主要的汽车零部件零售商:AutoShack.com
2019/02/23 全球购物
英国豪华家具和家居用品购物网站:Teddy Beau
2020/10/12 全球购物
PHP如何防止SQL注入
2014/05/03 面试题
英文自荐信
2013/12/15 职场文书
高中军训广播稿
2014/01/14 职场文书
化妆师职业生涯规划书
2014/02/16 职场文书
公司年会搞笑主持词
2014/03/24 职场文书
小学国庆节活动方案策划书
2014/09/16 职场文书
2014年人力资源部工作总结
2014/11/19 职场文书