应用JS提交表单的二种艺术和表明,验证和付出表单

button 按钮,结合onclick事件,验证和提交表单,buttononclick

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> new document </title>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  <style type="text/css"></style>
  <script type="text/javascript">
  //button 按钮,结合onclick事件,验证和提交表单
  function checkForm(){
        //判断用户名是否为空
        if(document.form1.username.value==""){
                window.alert("用户名不能为空");
        }else if(document.form1.username.value.length<5 || document.form1.username.value.length>20){
            window.alert("用户名长度必须介于5-50个字符之间!");
        }else{
            //使用form对象的submit()方法,实现提交。
            document.form1.submit();        
        }
  }
 </script>
 </head>
 <body>
  <form name="form1" method="get" action="login.php">
  用户名:<input type="text" name="username" />
  密码:<input type="password" name="userpwd" />
  <input type="button" value="提交表单" onclick="checkForm()" />
  </form>
 </body>
</html>

 

按钮,结合onclick事件,验证和提交表单,buttononclick ! DOCTYPE html
PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“…

利用JS提交表单的几种方法和验证(必看篇),js几种方法

工作中发现表单提交方便的问题,很多时候IE下提交好好的,打了火狐下就出现了问题,利用提交按钮就不成功了,于是利用JS的方式就成功了,也不知道为什么。在导师的催促下就总结出以下的几种常用表单提交的方法。

第一种方式:表单提交,在form标签中增加onsubmit事件来判断表单提交是否成功

<script type="text/javascript">
   function validate(obj) {
    if (confirm("提交表单?")) {
      alert(obj.value);
      return true;
    } else {
      alert(obj.value);
      return false;
    }
   }
 </script>
 <body>
  <form action="http://www.bkjia.com" onsubmit="return validate(document.getElementByIdx_x('myText'));"> <!—参数的这种写法注意下-->

    <input type="text" id="myText"/>
    <input type="submit" value="submit"/>

  </form>
</body>

第二种方式:通过button按钮来触发表单提交事件onclick=”submitForm();”,会忽略掉其他标签中的属性,比如form标签中的onsubmit属性就失效了。这时为了进行表单验证,可以将验证代码放在submitForm();方法中进行验证。

<script type="text/javascript">
   function validate() {
    if (confirm("提交表单?")) {
      return true;
    } else {
      return false;
    }
   }

   function submitForm() {
    if (validate()) {
      document.getElementByIdx_x("myForm").submit();
    }
   }
 </script>
 <body>
  <form action="http://www.bkjia.com" id="myForm">

    <input type="text"/>
    <input type="button" value="submitBtn" onclick="submitForm();"/> <!—也可以使用document.getElementByIdx_x(“该按钮的id”).click();来执行onclick事件-->

  </form>
</body>

第三种方式:将onsubmit事件放在submit标签中,而不是form标签中,此时表单验证失效,点击提交按钮表单直接提交

<script type="text/javascript">
   function validate() {
    if (confirm("提交表单?")) {
      return true;
    } else {
      return false;
    }
   }
 </script>
 <body>
  <form action="http://www.bkjia.com">

    <input type="text"/>
    <input type="submit" value="submit" onsubmit="return validate()"/>

  </form>
</body>

第四种方式:为submit按钮添加上onclick事件,其中该事件用于表单提交的验证,功能类似于在form标签中增加了onsubmit事件一样

<script type="text/javascript">
   function validate() {
    if (confirm("提交表单?")) {
      return true;
    } else {
      return false;
    }
   }
 </script>
 <body>
  <form action="http://www.bkjia.com">

    <input type="text"/>
    <input type="submit" value="submit" onclick="return validate()"/>

  </form>
</body>

第五种方式:

<body>
  <form action="http://www.bkjia.com" id="myForm">

  <input type="text"/>
  <input type="button" value="submitBtn" id="myBtn"/>

  </form>
 </body>

  <script type="text/javascript">

   function validate() {
      if (confirm("提交表单?")) {
        return true;
      } else {
        return false;
      }
}

通过button按钮来触发表单提交事件onclick=”submitForm();”,会忽略掉其他标签中的属性,比如form标签中的onsubmit属性就失效了。这时为了进行表单验证,可以将验证代码放在submitForm();方法中进行验证

function submitForm() {
      if (validate()) {
        document.getElementByIdx_x("myForm").submit();
      }
   }

   document.getElementByIdx_x("myBtn").onclick = submitForm;
</script>

以上这篇利用JS提交表单的几种方法和验证(必看篇)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持帮客之家。

工作中发现表单提交方便的问题,很多时候IE下提交好好的,打了火狐下就出现了问…

工作中发现表单提交方便的问题,很多时候IE下提交好好的,打了火狐下就出现了问题,利用提交按钮就不成功了,于是利用JS的方式就成功了,也不知道为什么。在导师的催促下就总结出以下的几种常用表单提交的方法。

第一种方式:表单提交,在form标签中增加onsubmit事件来判断表单提交是否成功

<script type="text/javascript">
   function validate(obj) {
    if (confirm("提交表单?")) {
      alert(obj.value);
      return true;
    } else {
      alert(obj.value);
      return false;
    }
   }
 </script>
 <body>
  <form action="//www.jb51.net" onsubmit="return validate(document.getElementByIdx_x('myText'));"> <!—参数的这种写法注意下-->

    <input type="text" id="myText"/>
    <input type="submit" value="submit"/>

  </form>
</body>

第二种方式:通过button按钮来触发表单提交事件onclick=”submitForm();”,会忽略掉其他标签中的属性,比如form标签中的onsubmit属性就失效了。这时为了进行表单验证,可以将验证代码放在submitForm();方法中进行验证。

<script type="text/javascript">
   function validate() {
    if (confirm("提交表单?")) {
      return true;
    } else {
      return false;
    }
   }

   function submitForm() {
    if (validate()) {
      document.getElementByIdx_x("myForm").submit();
    }
   }
 </script>
 <body>
  <form action="//www.jb51.net" id="myForm">

    <input type="text"/>
    <input type="button" value="submitBtn" onclick="submitForm();"/> <!—也可以使用document.getElementByIdx_x(“该按钮的id”).click();来执行onclick事件-->

  </form>
</body>

第三种方式:将onsubmit事件放在submit标签中,而不是form标签中,此时表单验证失效,点击提交按钮表单直接提交

<script type="text/javascript">
   function validate() {
    if (confirm("提交表单?")) {
      return true;
    } else {
      return false;
    }
   }
 </script>
 <body>
  <form action="//www.jb51.net">

    <input type="text"/>
    <input type="submit" value="submit" onsubmit="return validate()"/>

  </form>
</body>

第四种方式:为submit按钮添加上onclick事件,其中该事件用于表单提交的验证,功能类似于在form标签中增加了onsubmit事件一样

<script type="text/javascript">
   function validate() {
    if (confirm("提交表单?")) {
      return true;
    } else {
      return false;
    }
   }
 </script>
 <body>
  <form action="//www.jb51.net">

    <input type="text"/>
    <input type="submit" value="submit" onclick="return validate()"/>

  </form>
</body>

第五种方式:

<body>
  <form action="//www.jb51.net" id="myForm">

  <input type="text"/>
  <input type="button" value="submitBtn" id="myBtn"/>

  </form>
 </body>

  <script type="text/javascript">

   function validate() {
      if (confirm("提交表单?")) {
        return true;
      } else {
        return false;
      }
}

通过button按钮来触发表单提交事件onclick=”submitForm();”,会忽略掉其他标签中的属性,比如form标签中的onsubmit属性就失效了。这时为了进行表单验证,可以将验证代码放在submitForm();方法中进行验证

function submitForm() {
      if (validate()) {
        document.getElementByIdx_x("myForm").submit();
      }
   }

   document.getElementByIdx_x("myBtn").onclick = submitForm;
</script>

以上这篇利用JS提交表单的几种方法和验证(必看篇)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:

  • js校验表单后提交表单的三种方法总结
  • js防止表单重复提交的两种方法
  • jquery序列化form表单使用ajax提交后处理返回的json数据
  • js
    回车提交表单两种实现方法
  • js实现a标签超链接提交form表单的方法
  • JS中的form.submit()不能提交表单的错误原因
  • 利用JavaScript阻止表单提交的两种方法
  • 详细分析使用AngularJS编程中提交表单的方式
  • 巧用js提交表单轻松解决一个页面有多个提交按钮
  • 必发365手机版,js禁止表单重复提交

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*
*
Website