详解JavaScript中的表单验证


Posted in Javascript onJune 16, 2015

 表单验证用于发生在服务器,客户端已经输入所有必要的数据,然后按下提交按钮之后。如果一些已被输入的客户端的数据的已在错误形式或者被简单地丢失,则服务器将必须的所有数据发送回客户端,并请求的形式以正确的信息重新提交。这是一个漫长的过程,会增加服务器负担。

JavaScript中,提供了一种方法将其发送到web服务器之前验证客户端的计算机上的形式的数据。表单验证通常执行两种方式。

  1.     基本验证 - 首先,该表必须进行检查,以确保数据输入的需要将其每一个表单字段。这将通过表格的每个字段只需要循环,并检查数据。
  2.     数据格式验证 - 其次,该被输入的数据必须检查正确格式和值。这将需要放置更多的逻辑来测试数据的正确性。

我们将举一个例子来了解验证的过程。下面是简单的形式进行:

<html>
<head>
<title>Form Validation</title>
<script type="text/javascript">
<!--
// Form validation code will come here.
//-->
</script>
</head>
<body>
 <form action="/cgi-bin/test.cgi" name="myForm" 
     onsubmit="return(validate());">
 <table cellspacing="2" cellpadding="2" border="1">
 <tr>
  <td align="right">Name</td>
  <td><input type="text" name="Name" /></td>
 </tr>
 <tr>
  <td align="right">EMail</td>
  <td><input type="text" name="EMail" /></td>
 </tr>
 <tr>
  <td align="right">Zip Code</td>
  <td><input type="text" name="Zip" /></td>
 </tr>
 <tr>
 <td align="right">Country</td>
 <td>
 <select name="Country">
  <option value="-1" selected>[choose yours]</option>
  <option value="1">USA</option>
  <option value="2">UK</option>
  <option value="3">INDIA</option>
 </select>
 </td>
 </tr>
 <tr>
  <td align="right"></td>
  <td><input type="submit" value="Submit" /></td>
 </tr>
 </table>
 </form>
 </body>
 </html>

基本表单验证:

首先,我们将展示如何做一个基本的表单验证。在上面的表格要求validate()函数来验证数据在onsubmit事件发生。以下是validate()函数的实现:

<script type="text/javascript">
<!--
// Form validation code will come here.
function validate()
{
 
  if( document.myForm.Name.value == "" )
  {
   alert( "Please provide your name!" );
   document.myForm.Name.focus() ;
   return false;
  }
  if( document.myForm.EMail.value == "" )
  {
   alert( "Please provide your Email!" );
   document.myForm.EMail.focus() ;
   return false;
  }
  if( document.myForm.Zip.value == "" ||
      isNaN( document.myForm.Zip.value ) ||
      document.myForm.Zip.value.length != 5 )
  {
   alert( "Please provide a zip in the format #####." );
   document.myForm.Zip.focus() ;
   return false;
  }
  if( document.myForm.Country.value == "-1" )
  {
   alert( "Please provide your country!" );
   return false;
  }
  return( true );
}
//-->
</script>

 
数据格式验证:

现在,我们将看到我们如何将其提交到Web服务器之前,验证我们输入的表单数据。

这个例子说明了如何验证输入的电子邮件地址,这意味着电子邮件地址必须至少包含一个@符号和一个点(.)。此外,@绝不能是电子邮件地址的第一个字符,最后点必须在@符号后面的一个字符:

<script type="text/javascript">
<!--
function validateEmail()
{
 
  var emailID = document.myForm.EMail.value;
  atpos = emailID.indexOf("@");
  dotpos = emailID.lastIndexOf(".");
  if (atpos < 1 || ( dotpos - atpos < 2 )) 
  {
    alert("Please enter correct email ID")
    document.myForm.EMail.focus() ;
    return false;
  }
  return( true );
}
//-->
</script>
Javascript 相关文章推荐
解决IE下select标签innerHTML插入option的BUG(兼容IE,FF,Opera,Chrome,Safari)
May 13 Javascript
JS声明变量背后的编译原理剖析
Dec 28 Javascript
javascript dom追加内容实现示例
Sep 21 Javascript
JavaScript中判断对象类型的几种方法总结
Nov 11 Javascript
jQuery中;function($,undefined) 前面的分号的用处
Dec 17 Javascript
javascript解决IE6下hover问题的方法
Jul 28 Javascript
js 获取范围内的随机数实例代码
Aug 02 Javascript
Javascript中 带名 匿名 箭头函数的重要区别(推荐)
Jan 29 Javascript
JavaScript方法_动力节点Java学院整理
Jun 28 Javascript
vue父组件向子组件(props)传递数据的方法
Jan 02 Javascript
js如何获取访问IP、地区、当前操作浏览器
Jul 23 Javascript
layui异步加载table表中某一列数据的例子
Sep 16 Javascript
详解JavaScript中的异常处理方法
Jun 16 #Javascript
详解JavaScript对W3C DOM模版的支持情况
Jun 16 #Javascript
jQuery插件zepto.js简单实现tab切换
Jun 16 #Javascript
jQuery封装的tab选项卡插件分享
Jun 16 #Javascript
jquery插件splitScren实现页面分屏切换模板特效
Jun 16 #Javascript
简述JavaScript对传统文档对象模型的支持
Jun 16 #Javascript
纯javascript实现四方向文本无缝滚动效果
Jun 16 #Javascript
You might like
syphon 虹吸式咖啡冲泡冲煮倒水的得与失
2021/03/03 冲泡冲煮
php下载文件的代码示例
2012/06/29 PHP
PHP函数学习之PHP函数点评
2012/07/05 PHP
zf框架的session会话周期及次数限制使用示例
2014/03/13 PHP
PHP CURL post数据报错 failed creating formpost data
2016/10/16 PHP
记录几个javascript有关的小细节
2007/04/02 Javascript
jQuery 核心函数以及jQuery对象
2010/03/23 Javascript
js indexOf()定义和用法
2012/10/21 Javascript
JQuery加载图片自适应固定大小的DIV
2013/09/12 Javascript
关于jquery中全局函数each使用介绍
2013/12/10 Javascript
三种动态加载js的jquery实例代码另附去除js方法
2014/04/30 Javascript
js实现类似于add(1)(2)(3)调用方式的方法
2015/03/04 Javascript
jQuery插件WebUploader实现文件上传
2016/11/07 Javascript
Bootstrap基本插件学习笔记之折叠(22)
2016/12/08 Javascript
JavaScript中利用for循环遍历数组
2017/01/15 Javascript
Angular实现较为复杂的表格过滤,删除功能示例
2017/12/23 Javascript
详解JS取出两个数组中的不同或相同元素
2019/03/20 Javascript
vue项目中常见问题及解决方案(推荐)
2019/10/21 Javascript
vue中的 $slot 获取插槽的节点实例
2019/11/12 Javascript
[03:36]2015国际邀请赛第二日现场精彩集锦
2015/08/06 DOTA
Python内置的字符串处理函数详细整理(覆盖日常所用)
2014/08/19 Python
pandas把dataframe转成Series,改变列中值的类型方法
2018/04/10 Python
Python使用Pandas对csv文件进行数据处理的方法
2019/08/01 Python
Python matplotlib绘制图形实例(包括点,曲线,注释和箭头)
2020/04/17 Python
CSS3的first-child选择器实战攻略
2016/04/28 HTML / CSS
四年的大学生生活自我评价
2013/12/09 职场文书
便利店促销方案
2014/02/20 职场文书
个人委托书如何写
2014/09/25 职场文书
2014村党支部书记党建工作汇报材料
2014/11/02 职场文书
因公司原因离职的辞职信范文
2015/05/12 职场文书
关于法制教育的宣传语
2015/07/13 职场文书
《小蝌蚪找妈妈》教学反思
2016/02/23 职场文书
MySQL 表空间碎片的概念及相关问题解决
2021/05/07 MySQL
MySQL 数据类型详情
2021/11/11 MySQL
「租借女友」第2季樱泽墨角色PV&新视觉图公开
2022/03/21 日漫
Java无向树分析 实现最小高度树
2022/04/09 Javascript