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 相关文章推荐
兼容IE和FF的js脚本代码小结(比较常用)
Dec 06 Javascript
js css后面所带参数含义介绍
Aug 18 Javascript
jQuery自带的一些常用方法总结
Sep 03 Javascript
js实现透明度渐变效果的方法
Apr 10 Javascript
js实现input密码框提示信息的方法(附html5实现方法)
Jan 14 Javascript
js实现一个猜数字游戏
Mar 31 Javascript
ES6中let 和 const 的新特性
Sep 03 Javascript
vue实现条件判断动态绑定样式的方法
Sep 29 Javascript
在小程序开发中使用npm的方法
Oct 17 Javascript
JS实现textarea通过换行或者回车把多行数字分割成数组并且去掉数组中空的值
Oct 29 Javascript
js 递归json树实现根据子id查父id的方法分析
Nov 08 Javascript
解决Vue 移动端点击出现300毫秒延迟的问题
Jul 21 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模板Smarty的初级使用方法以及心得分享
2013/06/21 PHP
初识javascript 文档碎片
2010/07/13 Javascript
jquery 读取页面load get post ajax 四种方式代码写法
2011/04/02 Javascript
JavaScript的漂亮的代码片段
2013/06/05 Javascript
jQuery获取(选中)单选,复选框,下拉框中的值
2014/02/21 Javascript
jquery原创弹出层折叠效果点击折叠弹出一个层
2014/03/12 Javascript
angular中使用路由和$location切换视图
2015/01/23 Javascript
jQuery向后台传入json格式数据的方法
2015/02/13 Javascript
node.js读取文件到字符串的方法
2015/06/29 Javascript
JavaScript代码实现图片循环滚动效果
2020/03/19 Javascript
Javascript中prototype的使用详解
2016/06/18 Javascript
javascript ES6中箭头函数注意细节小结
2017/02/17 Javascript
ES6正则表达式扩展笔记
2017/07/25 Javascript
javascript兼容性(实例讲解)
2017/08/15 Javascript
详解react服务端渲染(同构)的方法
2017/09/21 Javascript
解决vue js IOS H5focus无法自动弹出键盘的问题
2018/08/30 Javascript
vue-router 手势滑动触发返回功能
2018/09/30 Javascript
关于微信公众号开发无法支付的问题解决
2018/12/28 Javascript
了解javascript中变量及函数的提升
2019/05/27 Javascript
JS前端广告拦截实现原理解析
2020/02/17 Javascript
vue项目实现设置根据路由高亮对应的菜单项操作
2020/08/06 Javascript
windows下python连接oracle数据库
2017/06/07 Python
Tensorflow 查看变量的值方法
2018/06/14 Python
python实现向微信用户发送每日一句 python实现微信聊天机器人
2019/03/27 Python
python如何制作缩略图
2019/04/30 Python
pandas DataFrame 数据选取,修改,切片的实现
2020/04/24 Python
RentCars.com巴西:汽车租赁网站
2016/08/22 全球购物
MUGLER官方网站:蒂埃里·穆勒香水
2019/11/26 全球购物
Linux面试经常问的文件系统操作命令
2015/11/05 面试题
党员创先争优公开承诺书
2014/03/28 职场文书
分公司任命书
2014/06/06 职场文书
县委班子四风对照检查材料思想汇报
2014/09/29 职场文书
入党积极分子对十八届四中全会期盼的思想汇报
2014/10/17 职场文书
大学生社会实践活动总结报告
2015/05/06 职场文书
暑期工社会实践报告
2015/07/13 职场文书
基层医务人员三严三实心得体会
2016/01/05 职场文书