JavaScript 表单验证

时间:2019-08-20 13:50:45  来源:igfitidea点击:

表单验证通常发生在服务器上,当客户端输入了所有必要的数据后,然后按下提交按钮。
如果客户端输入的数据不正确或者不全,服务器将不得不将所有数据发送回客户端,并请求用正确的信息重新提交表单。
这是一个漫长的过程,给服务器增加了很多负担。

JavaScript提供了在将表单数据发送到web服务器之前在客户端计算机上验证表单数据的方法。

表单验证通常执行两个功能:

  1. 基本验证——首先,必须检查表单,确保所有必需字段都已填写。它只需要循环遍历表单中的每个字段并检查数据。

  2. 数据格式验证——其次,必须检查输入的数据是否具有正确的形式和值。 代码必须包含适当的逻辑来测试数据的正确性。

JavaScript 表单验证例子

下面是一个html格式的简单表单。

<html>   
   <head>
      <title>Form Validation</title>      
      <script type = "text/javascript">
            // 这里写上表单验证的代码
      </script>      
   </head>
   
   <body>
      <form action = "" name = "myForm" onsubmit = "return(validate());">
         用户名:<input type = "text" name = "name" />
         邮箱:<input type = "text" name = "email" />
         <input type = "submit" value = "Submit" />
      </form>      
   </body>
</html>

基本表单验证

让我们看看如何进行基本的表单验证。当onsubmit事件发生时,我们调用validate()来验证数据。
返回true表示通过验证,数据将会被提交到服务端。

<script type = "text/javascript">
   function validate() {
      if( document.myForm.name.value == "" ) {
         alert( "请输入用户名!" );
         document.myForm.name.focus() ;
         return false;
      }
      if( document.myForm.email.value == "" ) {
         alert( "请输入邮箱地址!" );
         document.myForm.email.focus() ;
         return false;
      }
      return true;
   }
</script>

数据格式验证

下面验证输入的电子邮件地址。
邮箱地址需要包含一个“@”和一个点“."。
并且@不能是电子邮件地址的第一个字符,点后面至少要有一个字符。

<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("请输入正确的邮箱地址。")
         document.myForm.email.focus() ;
         return false;
      }
      return( true );
   }
</script>

整合在一起:

<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("请输入正确的邮箱地址。")
         document.myForm.email.focus() ;
         return false;
      }
      return( true );
   }
   function validate() {
      if( document.myForm.name.value == "" ) {
         alert( "请输入用户名!" );
         document.myForm.name.focus() ;
         return false;
      }
      if( document.myForm.email.value == "" ) {
         alert( "请输入邮箱地址!" );
         document.myForm.email.focus() ;
         return false;
      }
      if(!validateemail()){
         return false;
      }
      return true;
   }
   
</script>