详解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 相关文章推荐
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(上:事件篇)
Mar 24 Javascript
TBCompressor js代码压缩
Jan 05 Javascript
js单例模式详解实例
Nov 21 Javascript
判断字符串的长度(优化版)中文占两个字符
Oct 30 Javascript
jquery插件unobtrusive实现片段式加载
Jun 15 Javascript
JavaScript使用encodeURI()和decodeURI()获取字符串值的方法
Aug 04 Javascript
详解vue-validator(vue验证器)
Jan 16 Javascript
vue中element-ui表格缩略图悬浮放大功能的实例代码
Jun 26 Javascript
详解React native fetch遇到的坑
Aug 30 Javascript
vue实现div拖拽互换位置
Jul 29 Javascript
Vue2.0实现简单分页及跳转效果
Jul 29 Javascript
原生JS 实现的input输入时表格过滤操作示例
Aug 03 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
PHP实现读取一个1G的文件大小
2013/08/24 PHP
php数字每三位加逗号的功能函数
2015/10/22 PHP
JavaScript 中的事件教程
2007/04/05 Javascript
javascript 弹出窗口中是否显示地址栏的实现代码
2011/04/14 Javascript
Extjs显示从数据库取出时间转换JSON后的出现问题
2012/11/20 Javascript
JSON语法五大要素图文介绍
2012/12/04 Javascript
javascript小数四舍五入多种方法实现
2012/12/23 Javascript
Javscript删除数组中指定元素并返回新数组
2014/03/06 Javascript
JavaScript中this关键词的使用技巧、工作原理以及注意事项
2014/05/20 Javascript
jquery验证邮箱格式并显示提交按钮
2015/11/07 Javascript
详解如何让InstantClick兼容MathJax、百度统计等
2017/09/12 Javascript
JQueryDOM之样式操作
2019/03/27 jQuery
Webpack3+React16代码分割的实现
2021/03/03 Javascript
在Python的Django框架中创建语言文件
2015/07/27 Python
Python之日期与时间处理模块(date和datetime)
2017/02/16 Python
python实现杨辉三角思路
2017/07/14 Python
django使用LDAP验证的方法示例
2018/12/10 Python
Python OpenCV中的resize()函数的使用
2019/06/20 Python
pandas DataFrame 交集并集补集的实现
2019/06/24 Python
Python3 字典dictionary入门基础附实例
2020/02/10 Python
python代码实现TSNE降维数据可视化教程
2020/02/28 Python
Python 读取WAV音频文件 画频谱的实例
2020/03/14 Python
python 基于wx实现音乐播放
2020/11/24 Python
解决python 在for循环并且pop数组的时候会跳过某些元素的问题
2020/12/11 Python
html5教程画矩形代码分享
2013/12/04 HTML / CSS
联想加拿大官方网站:Lenovo Canada
2018/04/05 全球购物
俄罗斯玩具、儿童用品、儿童服装和鞋子网上商店:MyToys.ru
2019/10/14 全球购物
师范学院美术系毕业生自我鉴定
2014/01/29 职场文书
爱心捐款感谢信
2015/01/20 职场文书
万里长城导游词
2015/01/30 职场文书
教师个人师德总结
2015/02/06 职场文书
离婚起诉书怎么写
2015/05/19 职场文书
2015年检察院个人工作总结
2015/05/20 职场文书
2019年行政人事个人工作总结范本!
2019/07/19 职场文书
Pandas 稀疏数据结构的实现
2021/07/25 Python
一文搞懂Java中的注解和反射
2022/06/21 Java/Android