详解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 相关文章推荐
任意位置显示html菜单
Feb 01 Javascript
Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法
Jan 27 Javascript
jquery操作复选框(checkbox)的12个小技巧总结
Feb 04 Javascript
jQuery代码实现表格中点击相应行变色功能
May 09 Javascript
js验证框架之RealyEasy验证详解
Jun 08 Javascript
BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码
May 17 Javascript
详解使用React全家桶搭建一个后台管理系统
Nov 04 Javascript
详解Vue单元测试Karma+Mocha学习笔记
Jan 31 Javascript
解决vue 项目引入字体图标报错、不显示等问题
Sep 01 Javascript
Node.js API详解之 V8模块用法实例分析
Jun 05 Javascript
vue 获取url里参数的两种方法小结
Nov 12 Javascript
微信小程序tab左右滑动切换功能的实现代码
Feb 08 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
在WIN98下以apache模块方式安装php
2006/10/09 PHP
对Session和Cookie的区分与解释
2007/03/16 PHP
php数组的概述及分类与声明代码演示
2013/02/26 PHP
PHP大文件分片上传的实现方法
2018/10/28 PHP
javascript &amp;&amp;和||运算法的另类使用技巧
2009/11/28 Javascript
jquery中ajax学习笔记一
2011/10/16 Javascript
javascript学习基础笔记之DOM对象操作
2011/11/03 Javascript
JavaScript对象的property属性详解
2014/04/01 Javascript
多个$(document).ready()的执行顺序实例分析
2014/07/26 Javascript
详解vue与后端数据交互(ajax):vue-resource
2017/03/16 Javascript
JS字符串统计操作示例【遍历,截取,输出,计算】
2017/03/27 Javascript
vue 自定义提示框(Toast)组件的实现代码
2018/08/17 Javascript
JavaScript两种计时器的实例讲解
2019/01/31 Javascript
Django的URLconf中使用缺省视图参数的方法
2015/07/18 Python
Python实现控制台进度条功能
2016/01/04 Python
Python实现输出某区间范围内全部素数的方法
2018/05/02 Python
对python中xlsx,csv以及json文件的相互转化方法详解
2018/12/25 Python
详解Scrapy Redis入门实战
2020/11/18 Python
HTML5 本地存储之如果没有数据库究竟会怎样
2013/04/25 HTML / CSS
HTML5未来发展趋势
2016/02/01 HTML / CSS
美国时尚在线:Showpo
2017/09/08 全球购物
Origins加拿大官网:雅诗兰黛集团高端植物护肤品牌
2017/11/19 全球购物
Nip + Fab官网:英国美容品牌
2019/08/26 全球购物
农贸市场管理制度
2014/01/31 职场文书
迟到早退检讨书
2014/02/10 职场文书
名企HR怎样看待求职信
2014/02/23 职场文书
公务员政审个人鉴定
2014/02/25 职场文书
安全教育演讲稿
2014/05/09 职场文书
专家推荐信模板
2014/05/09 职场文书
求职简历自我评价怎么写
2015/03/10 职场文书
2015年八一建军节活动总结
2015/03/20 职场文书
2015年电话销售工作总结范文
2015/04/20 职场文书
vue项目两种方式实现竖向表格的思路分析
2021/04/28 Vue.js
Java Optional<Foo>转换成List<Bar>的实例方法
2021/06/20 Java/Android
详解java如何集成swagger组件
2021/06/21 Java/Android
python如何读取和存储dict()与.json格式文件
2022/06/25 Python