Javascript：表单验证（验证空值/邮箱格式）

最新推荐文章于 2024-05-09 13:04:18 发布

books1958

最新推荐文章于 2024-05-09 13:04:18 发布

阅读量2.7k

点赞数

分类专栏： html/css/javascript 文章标签： javascript 表单

本文链接：https://blog.csdn.net/books1958/article/details/43017733

版权

html/css/javascript 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

代码整理自w3school：http://www.w3school.com.cn

效果图：

示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />

<title>Javascript 表单验证</title>

<body>
  <h3>（一）验证必填项是否有空值。</h3>
  <form action = "submitpage.html" onsubmit = "return validate_form(this)" method = "post">
  Name:<input type = "text" name = "name" size = "20">
  <input type = "submit" value = "Submit">
  </form>

  <h3>（二）验证Email格式是否正确。</h3>
  <form action = "submitpage.html" onsubmit = "return is_email_form(this)" method = "post">
  Email:<input type = "text" name = "email" size = "20">
  <input type = "submit" value = "OK">
  </form>

  <script>
//判断内容是否为空
  function validate_form(thisform){
    with (thisform){
      if (!validate_required(name,"Name must be filled out!")){
        name.focus();
        return false
      }
    }
  }

  function validate_required(field,alerttxt){
      with (field){
        if (value==null||value==""){
          alert(alerttxt);
          return false
        }else {
          return true
        }
      }
   }

//判断内容是否符合email的格式
function is_email_form(thisform){
  with(thisform){
    if(!checkEmail(email,"Not a valid e-mail address!")){
      email.focus();
      return false;
    }
  }
}

function checkEmail(field, alertText){
  with(field){
    apos = value.indexOf("@");
    dotPos = value.indexOf(".");
    if(apos<1 || dotPos-apos<2){
      alert(alertText);
      return false;
    }else{
      return true;
    }
  }
}

  </script>
</body>

</html>