表单验证

最新推荐文章于 2021-10-28 13:55:31 发布

我是希希呀biubiubiu

最新推荐文章于 2021-10-28 13:55:31 发布

阅读量217

点赞数

分类专栏： JavaScript HTML web前端文章标签：表单函数

本文链接：https://blog.csdn.net/qq_35095321/article/details/78364683

版权

JavaScript 同时被 3 个专栏收录

19 篇文章

订阅专栏

web前端

17 篇文章

订阅专栏

HTML

9 篇文章

订阅专栏

判断是否为空

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>定义input type="file" 的样式</title>
  <script>
  //判断是否为空，并弹出
    function validate_required(inputform,alerttext){
      with(inputform){
        if(value==null||value==""){
          alert(alerttext);
          return false;
        } else{
          return true;
        }
      }
    }
    function validate_form(thisform){
      with(thisform){
        if(validate_required(name,"请输入姓名")==false){
          name.focus();
          return false;
        }
        if(validate_required(email,"请输入邮箱")==false){
          email.focus();
          return false;
        }
      }
    }
  </script>
</head>

<body>
  <div class="file-box">
    <form action="www.baidu.com" onsubmit="return validate_form(this)">
      <label for="username">name:</label>
      <input name="name" id="username">
      <label for="useremail">email:</label>
      <input name="email" id="useremail">
      <input type="submit">
    </form>
  </div>
</body>

</html>

判断邮箱是否输入正确

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>定义input type="file" 的样式</title>
  <script>
    //判断是否为空，并弹出
    function validate_required(inputform,alerttext){
      with(inputform){
        if(value==null||value==""){
          alert(alerttext);
          return false;
        } else{
          return true;
        }
      }
    }
    //判断邮箱格式是否输入正确
    function validate_email(inputform,alerttext){
      with(inputform){
        var req=/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/;
        if(req.test(value)==false){
          alert(alerttext);
          return false;
        } else{
          return true;
        }
      }
    }
    //验证表单
    function validate_form(thisform){
      with(thisform){
        if(validate_required(name,"请输入姓名")==false){
          name.focus();
          return false;
        }
        if(validate_required(email,"请输入邮箱")==false){
          email.focus();
          return false;
        }
        if(validate_email(email,"邮箱格式输入不正确")==false){
          email.focus();
          return false;
        }
      }
    }
  </script>
</head>

<body>
  <div class="file-box">
    <form action="www.baidu.com" onsubmit="return validate_form(this)">
      <label for="username">name:</label>
      <input name="name" id="username">
      <label for="useremail">email:</label>
      <input name="email" id="useremail">
      <input type="submit">
    </form>
  </div>
</body>

</html>