详解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 相关文章推荐
firefox 和 ie 事件处理的细节,研究,再研究 书写同时兼容ie和ff的事件处理代码
Apr 12 Javascript
对字符串进行HTML编码和解码的JavaScript函数
Feb 01 Javascript
给jQuery方法添加回调函数一款插件的应用
Jan 21 Javascript
『jQuery』名称冲突使用noConflict方法解决
Apr 22 Javascript
js(JavaScript)实现TAB标签切换效果的简单实例
Feb 26 Javascript
javascript实例--教你实现扑克牌洗牌功能
May 15 Javascript
HTML5基于Tomcat 7.0实现WebSocket连接并实现简单的实时聊天
Oct 31 Javascript
解析ajaxFileUpload 异步上传文件简单使用
Dec 30 Javascript
selenium 与 chrome 进行qq登录并发邮件操作实例详解
Apr 06 Javascript
chorme 浏览器记住密码后input黄色背景处理方法(两种)
Nov 22 Javascript
vue2.0自定义指令示例代码详解
Apr 25 Javascript
JavaScript剩余操作符Rest Operator详解
Jul 20 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
粗略计算在线时间,bug:ip相同
2006/12/09 PHP
PHP取进制余数函数代码
2012/01/19 PHP
php通过数组实现多条件查询实现方法(字符串分割)
2014/05/06 PHP
Win7下手动安装apache2.2、php5.4笔记
2015/04/03 PHP
分享php分页的功能模块
2015/06/16 PHP
PHP中利用sleep函数实现定时执行功能实现代码
2016/08/25 PHP
php语言注释,单行注释和多行注释
2018/01/21 PHP
容易被忽略的JS脚本特性
2011/09/13 Javascript
node.js中的emitter.on方法使用说明
2014/12/10 Javascript
js实现简单选项卡与自动切换效果的方法
2015/04/10 Javascript
jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】
2017/05/13 jQuery
Vue-cli创建项目从单页面到多页面的方法
2017/09/20 Javascript
JavaScript动态加载重复绑定问题
2018/04/01 Javascript
JS如何实现网站中PC端和手机端自动识别并跳转对应的代码
2020/01/08 Javascript
简单了解常用的JavaScript 库
2020/07/16 Javascript
[01:45]亚洲邀请赛互动指南虚拟物品介绍
2015/01/30 DOTA
解读! Python在人工智能中的作用
2017/11/14 Python
python模仿网页版微信发送消息功能
2018/02/24 Python
在numpy矩阵中令小于0的元素改为0的实例
2019/01/26 Python
Python嵌套函数,作用域与偏函数用法实例分析
2019/12/26 Python
python爬虫库scrapy简单使用实例详解
2020/02/10 Python
xadmin使用formfield_for_dbfield函数过滤下拉表单实例
2020/04/07 Python
Python Tornado核心及相关原理详解
2020/06/24 Python
Pycharm学生免费专业版安装教程的方法步骤
2020/09/24 Python
用sleep间隔进行python反爬虫的实例讲解
2020/11/30 Python
python多线程和多进程关系详解
2020/12/14 Python
css3圆角样式分享自定义按钮样式
2013/12/27 HTML / CSS
HTML5 Canvas之测试浏览器是否支持Canvas的方法
2015/01/01 HTML / CSS
日本即尚网:JSHOPPERS.com(支持中文)
2019/12/03 全球购物
文明餐桌行动实施方案
2014/02/19 职场文书
保护野生动物倡议书
2014/05/16 职场文书
工程部部长岗位职责
2015/02/12 职场文书
2016年教代会开幕词
2016/03/04 职场文书
Django项目如何获得SSL证书与配置HTTPS
2021/04/30 Python
详解Laravel服务容器的优势
2021/05/29 PHP
使用@Value值注入及配置文件组件扫描
2021/07/09 Java/Android