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 相关文章推荐
Ajax,UTF-8还是GB2312 eval 还是execScript
Nov 13 Javascript
Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法
Jan 27 Javascript
js实现杯子倒水问题自动求解程序
Mar 25 Javascript
写JQuery插件的基本知识
Nov 25 Javascript
使用javascript实现json数据以csv格式下载
Jan 09 Javascript
Vue表单实例代码
Sep 05 Javascript
jQuery的Read()方法代替原生JS详解
Nov 08 Javascript
微信公众平台开发教程(五)详解自定义菜单
Dec 02 Javascript
easyUI combobox实现联动效果
Jan 17 Javascript
Vuex和前端缓存的整合策略详解
May 09 Javascript
js注册时输入合法性验证方法
Oct 21 Javascript
详解vue v-model
Aug 31 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 strtotime函数详解
2009/12/18 PHP
php封装的pdo数据库操作工具类与用法示例
2019/05/08 PHP
JQuery在光标位置插入内容的实现代码
2010/06/18 Javascript
jQuery结合PHP+MySQL实现二级联动下拉列表[实例]
2011/11/15 Javascript
JS自定义功能函数实现动态添加网址参数修改网址参数值
2013/08/02 Javascript
JAVASCRIPT函数作用域和提前声明 分享
2013/08/22 Javascript
中文输入法不触发onkeyup事件的解决办法
2014/07/09 Javascript
jQuery实现视频作为全屏幕背景
2014/12/18 Javascript
JS获取下拉框显示值和判断单选按钮的方法
2015/07/09 Javascript
Nodejs抓取html页面内容(推荐)
2016/08/11 NodeJs
BootStrap+Angularjs+NgDialog实现模式对话框
2016/08/24 Javascript
微信小程序自定义导航隐藏和显示功能
2017/06/13 Javascript
Webpack中雪碧图插件使用详解
2018/05/25 Javascript
js jquery 获取某一元素到浏览器顶端的距离实现方法
2018/09/05 jQuery
node.js命令行教程图文详解
2019/05/27 Javascript
Python中%r和%s的详解及区别
2017/03/16 Python
Python实现的简单dns查询功能示例
2017/05/24 Python
详解Python nose单元测试框架的安装与使用
2017/12/20 Python
JupyterNotebook设置Python环境的方法步骤
2019/12/03 Python
解决TensorFlow调用Keras库函数存在的问题
2020/07/06 Python
pandas使用函数批量处理数据(map、apply、applymap)
2020/11/27 Python
惠普美国官方商店:HP Official Store
2016/08/28 全球购物
美国乡村商店:Plow & Hearth
2016/09/12 全球购物
JBL澳大利亚官方商店:扬声器、耳机和音响系统
2018/05/24 全球购物
夏威夷咖啡公司:Hawaii Coffee Company
2019/09/19 全球购物
美国眼镜在线零售商:Dualens
2019/12/07 全球购物
RUIFIER官网:英国奢侈高级珠宝品牌
2020/06/12 全球购物
重写子类方法时,抛出异常的书写注意事项
2015/10/17 面试题
大学毕业生最详细的自我评价分享
2013/11/18 职场文书
3的组成教学反思
2014/04/30 职场文书
保护动物的标语
2014/06/11 职场文书
2015年控辍保学工作总结
2015/05/18 职场文书
上班旷工检讨书
2015/08/15 职场文书
《小摄影师》教学反思
2016/02/18 职场文书
十二月早安励志心语大全
2019/12/03 职场文书
5个pandas调用函数的方法让数据处理更加灵活自如
2022/04/24 Python