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 相关文章推荐
打印json对象的内容及JSON.stringify函数应用
Mar 29 Javascript
JavaScript定时器和优化的取消定时器方法
Jul 03 Javascript
javascript实现网页屏蔽Backspace事件,输入框不屏蔽
Jul 21 Javascript
微信小程序 框架详解及实例应用
Sep 26 Javascript
bootstrap实现动态进度条效果
Mar 08 Javascript
详解组件库的webpack构建速度优化
Jun 18 Javascript
react-native使用leanclound消息推送的方法
Aug 06 Javascript
Node.js Koa2使用JWT进行鉴权的方法示例
Aug 17 Javascript
微信 jssdk 签名错误invalid signature的解决方法
Jan 14 Javascript
javascript History对象原理解析
Feb 17 Javascript
Vue实现input宽度随文字长度自适应操作
Jul 29 Javascript
解决ant design vue中树形控件defaultExpandAll设置无效的问题
Oct 26 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中的函数嵌套层数限制分析
2011/06/13 PHP
PHP实现抓取HTTPS内容
2014/12/01 PHP
php表单提交与$_POST实例分析
2015/01/26 PHP
是 WordPress 让 PHP 更流行了 而不是框架
2016/02/03 PHP
SCP远程VPS快速搬家和WDCP升级php5.3安装memcached和eaccelerator教程
2017/07/27 PHP
PHP实现的回溯算法示例
2017/08/15 PHP
php两点地理坐标距离的计算方法
2018/12/29 PHP
php异常处理捕获错误整理
2019/09/23 PHP
javascript数字格式化通用类 accounting.js使用
2012/08/24 Javascript
window.open关于浏览器拦截问题分析及解决方法
2013/02/05 Javascript
手机号码,密码正则验证
2014/09/04 Javascript
浅谈JS闭包中的循环绑定处理程序
2014/11/09 Javascript
如何防止JavaScript自动插入分号
2015/11/05 Javascript
Bootstrap整体框架之JavaScript插件架构
2016/12/15 Javascript
JS实现的系统调色板完整实例
2016/12/21 Javascript
JavaScript之事件委托实例(附原生js和jQuery代码)
2017/07/22 jQuery
Vue实现点击时间获取时间段查询功能
2020/08/21 Javascript
springMvc 前端用json的方式向后台传递对象数组方法
2018/08/07 Javascript
vue iview实现动态新增和删除
2020/06/17 Javascript
利用Python中unittest实现简单的单元测试实例详解
2017/01/09 Python
Python实现的下载网页源码功能示例
2017/06/13 Python
Python基于pyCUDA实现GPU加速并行计算功能入门教程
2018/06/19 Python
django用户登录和注销的实现方法
2018/07/16 Python
python3 使用traceback定位异常实例
2020/03/09 Python
python中rb含义理解
2020/06/18 Python
Html5实现iPhone开机界面示例代码
2013/06/30 HTML / CSS
Java平台和其他软件平台有什么不同
2015/06/05 面试题
车工岗位职责
2013/11/26 职场文书
外语学院毕业生的自我鉴定
2013/11/28 职场文书
实习心得体会
2014/01/02 职场文书
小学教师寄语大全
2014/04/03 职场文书
大学中国梦演讲稿
2014/04/23 职场文书
关于爱国的演讲稿
2014/05/07 职场文书
考试作弊万能检讨书
2014/10/19 职场文书
党的群众路线教育实践活动整改方案
2014/10/28 职场文书
Golang 对es的操作实例
2022/04/20 Golang