详解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 相关文章推荐
Javascript里使用Dom操作Xml
Jan 22 Javascript
JavaScript中使用Math.floor()方法对数字取整
Jun 15 Javascript
正则表达式优化JSON字符串的技巧
Dec 24 Javascript
基于BootStrap环境写jQuery tabs插件
Jul 12 Javascript
JavaScript实现水平进度条拖拽效果
Jan 18 Javascript
js 递归和定时器的实例解析
Feb 03 Javascript
React-router中结合webpack实现按需加载实例
May 25 Javascript
原生JS实现自定义滚动条效果
Oct 27 Javascript
详解vue axios二次封装
Jul 22 Javascript
JavaScript实现简单的隐藏式侧边栏功能示例
Aug 31 Javascript
微信小程序搭建自己的Https服务器
May 02 Javascript
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
Jun 10 jQuery
详解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
PHP 5昨天隆重推出--PHP 5/Zend Engine 2.0新特性
2006/10/09 PHP
从网上搜到的phpwind 0day的代码
2006/12/07 PHP
ecshop 订单确认中显示省市地址信息的方法
2010/03/15 PHP
ThinkPHP框架整合微信支付之Native 扫码支付模式二图文详解
2019/04/09 PHP
Thinkphp5.0 框架视图view的比较标签用法分析
2019/10/12 PHP
javascript温习的一些笔记 基础常用知识小结
2011/06/22 Javascript
教你如何在 Javascript 文件里使用 .Net MVC Razor 语法
2014/07/23 Javascript
吐槽一下我所了解的Node.js
2014/10/08 Javascript
微信分享的标题、缩略图、连接及描述设置方法
2014/10/14 Javascript
jquery带翻页动画的电子杂志代码分享
2015/08/21 Javascript
实例解析jQuery中proxy()函数的用法
2016/05/24 Javascript
AngularJS基础 ng-if 指令用法
2016/08/01 Javascript
详解vue与后端数据交互(ajax):vue-resource
2017/03/16 Javascript
Vue中计算属性computed的示例解读
2017/07/26 Javascript
Angular6 Filter实现页面搜索的示例代码
2018/12/02 Javascript
微信小程序自定义组件实现环形进度条
2020/11/17 Javascript
Javascript异步编程async实现过程详解
2020/04/02 Javascript
python 字符串格式化代码
2013/03/17 Python
Windows下PyMongo下载及安装教程
2015/04/27 Python
python实现守护进程、守护线程、守护非守护并行
2018/05/05 Python
python爬取个性签名的方法
2018/06/17 Python
python3.6利用pyinstall打包py为exe的操作实例
2018/10/31 Python
python Django编写接口并用Jmeter测试的方法
2019/07/31 Python
使用python动态生成波形曲线的实现
2019/12/04 Python
Python如何实现的二分查找算法
2020/05/27 Python
Python3压缩和解压缩实现代码
2021/03/01 Python
kmart凯马特官网:美国最大的打折零售商和全球最大的批发商之一
2016/11/17 全球购物
法国和欧洲海边和滑雪度假:Pierre & Vacances
2017/01/04 全球购物
在线课程:Skillshare
2019/04/02 全球购物
英国DIY汽车维修配件网站:DIY Car Service Parts
2019/08/30 全球购物
上课说话检讨书大全
2014/01/22 职场文书
高考寄语大全
2014/04/08 职场文书
工作推荐信范文
2014/05/10 职场文书
环保建议书400字
2014/05/14 职场文书
总经理任命书范本
2014/06/05 职场文书
Docker部署Mysql8的实现步骤
2022/07/07 Servers