无涯教程-Javascript - 表单验证表单验证通常是在客户端输入所有必要数据然后按下Submit按钮之后在服务器

表单验证通常是在客户端输入所有必要数据然后按下Submit按钮之后在服务器上进行的，如果客户端输入的数据不正确或完全丢失，则服务器必须将所有数据发送回客户端，并要求使用正确的信息重新提交表单。

JavaScript提供了一种在将表单数据发送到Web服务器之前在客户端计算机上对其进行验证的方法。表单验证通常执行两个函数。

基本验证 - 首先，必须检查表单以确保填写了所有必填字段。
数据格式验证 - 其次，必须检查输入的数据的正确形式和值。

无涯教程将以一个示例来了解验证过程，这是html格式的简单表格。

<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>
        </span><span class="tag">&lt;tr&gt;</span><span class="pln">
           </span><span class="tag">&lt;td</span><span class="pln"> </span><span class="atn">align</span><span class="pun">=</span><span class="atv">"right"</span><span class="tag">&gt;</span><span class="pln">EMail</span><span class="tag">&lt;/td&gt;</span><span class="pln">
           </span><span class="tag">&lt;td&gt;&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"EMail"</span><span class="pln"> </span><span class="tag">/&gt;&lt;/td&gt;</span><span class="pln">
        </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
        
        </span><span class="tag">&lt;tr&gt;</span><span class="pln">
           </span><span class="tag">&lt;td</span><span class="pln"> </span><span class="atn">align</span><span class="pun">=</span><span class="atv">"right"</span><span class="tag">&gt;</span><span class="pln">Zip Code</span><span class="tag">&lt;/td&gt;</span><span class="pln">
           </span><span class="tag">&lt;td&gt;&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"Zip"</span><span class="pln"> </span><span class="tag">/&gt;&lt;/td&gt;</span><span class="pln">
        </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
        
        </span><span class="tag">&lt;tr&gt;</span><span class="pln">
           </span><span class="tag">&lt;td</span><span class="pln"> </span><span class="atn">align</span><span class="pun">=</span><span class="atv">"right"</span><span class="tag">&gt;</span><span class="pln">Country</span><span class="tag">&lt;/td&gt;</span><span class="pln">
           </span><span class="tag">&lt;td&gt;</span><span class="pln">
              </span><span class="tag">&lt;select</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"Country"</span><span class="tag">&gt;</span><span class="pln">
                 </span><span class="tag">&lt;option</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"-1"</span><span class="pln"> </span><span class="atn">selected</span><span class="tag">&gt;</span><span class="pln">[choose yours]</span><span class="tag">&lt;/option&gt;</span><span class="pln">
                 </span><span class="tag">&lt;option</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"1"</span><span class="tag">&gt;</span><span class="pln">USA</span><span class="tag">&lt;/option&gt;</span><span class="pln">
                 </span><span class="tag">&lt;option</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"2"</span><span class="tag">&gt;</span><span class="pln">UK</span><span class="tag">&lt;/option&gt;</span><span class="pln">
                 </span><span class="tag">&lt;option</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"3"</span><span class="tag">&gt;</span><span class="pln">INDIA</span><span class="tag">&lt;/option&gt;</span><span class="pln">
              </span><span class="tag">&lt;/select&gt;</span><span class="pln">
           </span><span class="tag">&lt;/td&gt;</span><span class="pln">
        </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
        
        </span><span class="tag">&lt;tr&gt;</span><span class="pln">
           </span><span class="tag">&lt;td</span><span class="pln"> </span><span class="atn">align</span><span class="pun">=</span><span class="atv">"right"</span><span class="tag">&gt;&lt;/td&gt;</span><span class="pln">
           </span><span class="tag">&lt;td&gt;&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"submit"</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"Submit"</span><span class="pln"> </span><span class="tag">/&gt;&lt;/td&gt;</span><span class="pln">
        </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
        
     </span><span class="tag">&lt;/table&gt;</span><span class="pln">
  </span><span class="tag">&lt;/form&gt;</span><span class="pln">      

</body>
</html>

运行上面代码输出

基本表格验证

首先看看如何进行基本的表单验证。在上面的表格中，当 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</span><span class="pun">(</span><span class="pln"> </span><span class="str">"Please provide a zip in the format #####."</span><span class="pln"> </span><span class="pun">);</span><span class="pln">
        document</span><span class="pun">.</span><span class="pln">myForm</span><span class="pun">.</span><span class="typ">Zip</span><span class="pun">.</span><span class="pln">focus</span><span class="pun">()</span><span class="pln"> </span><span class="pun">;</span><span class="pln">
        </span><span class="kwd">return</span><span class="pln"> </span><span class="kwd">false</span><span class="pun">;</span><span class="pln">
     </span><span class="pun">}</span><span class="pln">
     </span><span class="kwd">if</span><span class="pun">(</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">myForm</span><span class="pun">.</span><span class="typ">Country</span><span class="pun">.</span><span class="pln">value </span><span class="pun">==</span><span class="pln"> </span><span class="str">"-1"</span><span class="pln"> </span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
        alert</span><span class="pun">(</span><span class="pln"> </span><span class="str">"Please provide your country!"</span><span class="pln"> </span><span class="pun">);</span><span class="pln">
        </span><span class="kwd">return</span><span class="pln"> </span><span class="kwd">false</span><span class="pun">;</span><span class="pln">
     </span><span class="pun">}</span><span class="pln">
     </span><span class="kwd">return</span><span class="pun">(</span><span class="pln"> </span><span class="kwd">true</span><span class="pln"> </span><span class="pun">);</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">

//-->
</script>

数据格式验证

现在，无涯教程将看到如何在将输入的表单数据提交到Web服务器之前对其进行验证。

以下示例显示了如何验证输入的电子邮件地址。电子邮件地址必须至少包含“@”符号和点(.)。另外，“@”一定不能是电子邮件地址的第一个字符，最后一个点必须至少是“@”符号后的一个字符。

请尝试以下代码进行电子邮件验证。

<script type="text/javascript">
   <!--
      function validateEmail() {
         var emailID=document.myForm.EMail.value;
         atpos=emailID.indexOf("@");
         dotpos=emailID.lastIndexOf(".");
     </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">atpos </span><span class="pun">&lt;</span><span class="pln"> </span><span class="lit">1</span><span class="pln"> </span><span class="pun">||</span><span class="pln"> </span><span class="pun">(</span><span class="pln"> dotpos </span><span class="pun">-</span><span class="pln"> atpos </span><span class="pun">&lt;</span><span class="pln"> </span><span class="lit">2</span><span class="pln"> </span><span class="pun">))</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
        alert</span><span class="pun">(</span><span class="str">"Please enter correct email ID"</span><span class="pun">)</span><span class="pln">
        document</span><span class="pun">.</span><span class="pln">myForm</span><span class="pun">.</span><span class="typ">EMail</span><span class="pun">.</span><span class="pln">focus</span><span class="pun">()</span><span class="pln"> </span><span class="pun">;</span><span class="pln">
        </span><span class="kwd">return</span><span class="pln"> </span><span class="kwd">false</span><span class="pun">;</span><span class="pln">
     </span><span class="pun">}</span><span class="pln">
     </span><span class="kwd">return</span><span class="pun">(</span><span class="pln"> </span><span class="kwd">true</span><span class="pln"> </span><span class="pun">);</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">

//-->
</script>

无涯教程-Javascript - 表单验证

基本表格验证

数据格式验证

参考链接