JavaScript 表单验证-之路教程

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>

JavaScript 表单验证

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

JavaScript提供了在将表单数据发送到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("请输入正确的邮箱地址。")
         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>

日期：2019-08-20 13:50:45 来源：oir作者：oir

←JavaScript 错误和异常处理

JavaScript 动画→

JavaScript 表单验证例子

基本表单验证

数据格式验证

目录