博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
表单提交验证方法
阅读量:4635 次
发布时间:2019-06-09

本文共 2217 字,大约阅读时间需要 7 分钟。

 

第一种方式:表单提交,在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="" οnsubmit="return validate(document.getElementByIdx_x('myText'));"> <!—参数的这种写法注意下-->
   
       <input type="text" id="myText"/>
       <input type="submit" value="submit"/>
   
    </form>
  </body>
第二种方式:通过button按钮来触发表单提交事件οnclick="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="" id="myForm">
   
       <input type="text"/>
       <input type="button" value="submitBtn" οnclick="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="">
   
       <input type="text"/>
       <input type="submit" value="submit" οnsubmit="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="">
   
       <input type="text"/>
       <input type="submit" value="submit" οnclick="return validate()"/>
   
    </form>
  </body>

 

第五种方式:

  <body>

    <form action="http://www.baidu.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按钮来触发表单提交事件οnclick="submitForm();",会忽略掉其他标签中的属性,比如form标签中的onsubmit属性就失效了。这时为了进行表单验证,可以将验证代码放在submitForm();方法中进行验证

     function submitForm() {

           if (validate()) {

                document.getElementByIdx_x("myForm").submit();

           }

     }

    

     document.getElementByIdx_x("myBtn").onclick = submitForm;

  </script>

 

转载于:https://www.cnblogs.com/lilinfeng569482/p/5539861.html

你可能感兴趣的文章
pyQt 每日一练习 -- 登录框
查看>>
wp 删除独立存储空间文件(多级非空文件夹删除)
查看>>
Loadrunner安装使用入门
查看>>
smartupload 上传文件时 把页面编码改成gbk 解决乱码
查看>>
EPS是什么格式
查看>>
input禁止显示历史输入记录
查看>>
Python的数据库操作(Sqlalchemy)
查看>>
2.抽取代码(BaseActivity)
查看>>
My simplified pickit2 clone
查看>>
Redis 入门知识
查看>>
夏天过去了, 姥爷推荐几套来自smashingmagzine的超棒秋天主题壁纸
查看>>
转--Android如何在java代码中设置margin
查看>>
反射的所有api
查看>>
Js 判断网页窗口是否滚动到底部
查看>>
上传文件
查看>>
css 定位及遮罩层小技巧
查看>>
用java向mysql数据库中插入数据为空
查看>>
项目中非常有用并且常见的ES6语法
查看>>
dateTimePicker编辑状态下,取值不正确的问题
查看>>
mac 端口转发方案
查看>>