详解JavaScript中的表单验证

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

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>
赞 (0)

相关推荐

  • js检验密码强度(低中高)附图

    js检验密码强度(低中高)附图

    最近一直在做通行证项目,里面的注册模块中输入密码需要显示密码强度(低中高).今天就把做的效果给大家分享下,代码没有网上搜索的那么复杂,能够满足一般的需求. html 代码如下: 复制代码 代码如下: <!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"/> <title>密码强度</title> <style type=

  • JavaScript实现仿网易通行证表单验证

    JavaScript实现仿网易通行证表单验证

    介绍一下表单验证,不错哦: 如图 CSS代码 @charset "gb2312"; /* CSS Document */ body,dl,dt,dd,div,form {padding:0;margin:0;} #header,#main{ width:650px; margin:0 auto; } .bg{ background-image:url(../images/register_bg.gif); background-repeat:no-repeat; width:6px;

  • javascript实现检验的各种规则

    本文实例讲述了javascript实现检验的各种规则.分享给大家供大家参考.具体如下: /** * 检验各种规则 * @param str 检验的内容 * @param cType 预设的检验规则 字符串[ * empty, 检验是否为空 * telphone, 座机手机号码 * allphone, 所有手机号码 * ydphone, 移动手机号码 * ltphone, 联通手机号码 * dxphone, 电信手机号码 * email, 邮箱 * url, 网址 * cn, 汉字 * image

  • javascript实现验证IP地址等相关信息代码

    本代码是从个人项目中提取出来的,应该可以算的上是相当全面有效的IP相关信息的验证代码了,用来前端验证 /* ****************** */ /* 判断IP地址是否合法 */ var judgeIpIsLegal = function(ipAddr){ var regIps = /^(((25[0-5]|2[0-4]\d|1\d{2}|[1-9]\d|[0-9])\.){3}(25[0-5]|2[0-4]\d|1\d{2}|[1-9]\d|[0-9]))$/; return regIp

  • 中文用户名的js检验正则

    username1: "(^[a-zA-Z]{1}([a-zA-Z0-9_]){4,14}|(^[\u4E00-\uFA29]{1}+[a-zA-Z0-9\u4E00-\uFA29]{2,7}))$", 复制代码 代码如下: <script> <!-- function checkStr(str){ // [\u4E00-\uFA29]|[\uE7C7-\uE7F3]汉字编码范围 var re1 = new RegExp("^([\u4E00-\uFA29]

  • javascript实现的简单的表单验证

    表单验证几乎是不可缺少的,有的表单验证是在后台完成的,有的则是使用JavaScript在在前端完成基本的验证,这样可以有效的减轻服务器的压力,下面就介绍一下JS实现的最简单的表单验证.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>我们</title> <script type="text/javascript

  • JavaScript常用验证函数实例汇总

    本文实例汇总了JavaScript常用验证函数.分享给大家供大家参考.具体汇总如下: 一.字符串类验证 1. 长度限制 复制代码 代码如下: <script> function test() { if(document.a.b.value.length>50) { alert("不能超过50个字符!"); document.a.b.focus(); return false; } } </script> <form name=a onsubmit=&

  • 编写Js代码要注意的几条规则

    1.不要大量使用document.write() 2.检查客户端支持对象的能力(渐进式)而不是检查其客户端,测试要使用的对象. 3.访问既有HTML中的内容而不是通过Js添加HTML(行为层与结构层分离) 4.不要使用专有DOM对象(例如IE的document.all) 5.将脚本放进一个.js文件而不是在HTML中到处可见. 6.对运行良好而且不用客户端编程的网站进行改进,而不是首先添加脚本然后添加非脚本的备用方案. 7.代码要保持独立,不要使用可能与其他脚本冲突的全局变量.(可用对象字面量)

  • JavaScript验证电子邮箱的函数

    本文介绍一个JavaScript验证电子邮箱的函数,相当靠谱. JavaScript验证电子邮箱的函数,源代码如下: function checkEmail(text) { if( text.match(/qq\.com$/) ) { return -1; } if( ! text.match(/^\w+([._-]\w+)*@(\w+\.)+\w+$/) ) { return false; } return true; } 关于JavaScript验证电子邮箱的函数,本文就介绍这么多,希望对您

  • javascript实现验证身份证号的有效性并提示

    javascript实现验证身份证号的有效性并提示 function nunber(allowancePersonValue){ if(allowancePersonValue=="身份证号"){ $("#span_username").show(); $("#span_username").html("身份证号不能为空"); return false; } //校验长度,类型 else if(isCardNo(allowan

  • javascript验证邮件地址和MX记录的方法

    本文实例讲述了javascript验证邮件地址和MX记录的方法.分享给大家供大家参考.具体如下: // Tests for a valid email address and optionally tests for valid MX records, too. function is_valid_email($email, $test_mx = false) { if(eregi("^([_a-z0-9-]+)(\.[_a-z0-9-]+)*@([a-z0-9-]+)(\.[a-z0-9-]+

随机推荐