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 常用到的增,删,改,查操作代码
Dec 28 Javascript
javascript 闭包
Sep 15 Javascript
jsp js鼠标移动到指定区域显示选项卡离开时隐藏示例
Jun 14 Javascript
jquery实现图片灯箱明暗的遮罩效果
Nov 15 Javascript
基于Jquery插件Uploadify实现实时显示进度条上传图片
Mar 26 Javascript
深入浅析JavaScript中的Function类型
Jul 09 Javascript
Vue.js中兄弟组件之间互相传值实例
Jun 01 Javascript
解决iView中时间控件选择的时间总是少一天的问题
Mar 15 Javascript
在layui下对元素进行事件绑定的实例
Sep 06 Javascript
微信小程序webSocket的使用方法
Feb 20 Javascript
vue 验证两次输入的密码是否一致的方法示例
Sep 29 Javascript
nuxt 服务器渲染动态设置 title和seo关键字的操作
Nov 05 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 radio 单选框获取与保持值的实现代码
2010/05/15 PHP
PHP 写文本日志实现代码
2010/05/18 PHP
php下连接ftp实现文件的上传、下载、删除文件实例代码
2010/06/03 PHP
php使用get_class_methods()函数获取分类的方法
2016/07/20 PHP
浅谈PHP中try{}catch{}的使用方法
2016/12/09 PHP
PhpStorm的使用教程(本地运行PHP+远程开发+快捷键)
2020/03/26 PHP
javascript css float属性的特殊写法
2008/11/13 Javascript
jquery form表单提交插件asp.net后台中文解码
2010/06/12 Javascript
非常强大的 jQuery.AsyncBox 弹出对话框插件
2011/08/29 Javascript
js 距离某一时间点时间是多少实现代码
2013/10/14 Javascript
javascript验证身份证号
2015/03/03 Javascript
解决angular的$http.post()提交数据时后台接收不到参数值问题的方法
2015/12/10 Javascript
JavaScript实战之带收放动画效果的导航菜单
2016/08/16 Javascript
AngularJS指令用法详解
2016/11/02 Javascript
微信小程序商城项目之商品属性分类(4)
2017/04/17 Javascript
layui表格内放置图片,并点击放大的实例
2019/09/10 Javascript
react实现同页面三级跳转路由布局
2019/09/26 Javascript
vue 实现cli3.0中使用proxy进行代理转发
2019/10/30 Javascript
Vue生命周期activated之返回上一页不重新请求数据操作
2020/07/26 Javascript
[06:24]DOTA2 2015国际邀请赛中国区预选赛第二日TOP10
2015/05/27 DOTA
[46:53]Secret vs Liquid 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python实现向ppt文件里插入新幻灯片页面的方法
2015/04/28 Python
Python使用logging模块实现打印log到指定文件的方法
2018/09/05 Python
Python request操作步骤及代码实例
2020/04/13 Python
Python参数传递机制传值和传引用原理详解
2020/05/22 Python
Django封装交互接口代码
2020/07/12 Python
python爬虫爬取某网站视频的示例代码
2021/02/20 Python
Python爬虫爬取ts碎片视频+验证码登录功能
2021/02/22 Python
韩国江南富人区高端时尚百货商场:Galleria(格乐丽雅)
2018/03/27 全球购物
毕业生动漫设计求职信
2013/10/11 职场文书
安全生产管理合理化建议书
2014/03/12 职场文书
高中国旗下的演讲稿
2014/08/28 职场文书
离婚协议书范本2014
2014/10/27 职场文书
2015元旦晚会主持人开场白+结束语
2014/12/14 职场文书
工作失职检讨书
2015/01/26 职场文书
风雨哈佛路观后感
2015/06/03 职场文书