onsubmit--->表单验证

最新推荐文章于 2023-11-24 22:24:18 发布

安逸一一一

最新推荐文章于 2023-11-24 22:24:18 发布

阅读量235

点赞数

分类专栏： web 文章标签： web

本文链接：https://blog.csdn.net/weixin_40695725/article/details/79260566

版权

web 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Html 表单验证 --->onsubmit

当我们需要在表单提交前进行验证时我们想到的第一个办法是在表单<form>标签中
添加onsubmit事件添加方法test()方法进行验证
但当我们实际操作时,无论返回true/false 都会进行提交
原因:
当onsubmit事件会调用自己内部的方法进行表单提交,默认返回true
()
然后才调用绑定的方法进行验证

解决方案;
01;重写onsubmit()方法
02;通过button 按钮进行提交

<body>
<form action="https://www.hao123.com/" method="post" id='form01' οnsubmit="return test()">
       保险名称:<input type="text" name="bxmc" id="bxmc"/></br></br>
       保险类型:<input type="text" name="bxtype" id="bxtype"/></br></br>
       保险价格:<input type="text" name="bxPrice" id="bxPrice"/></br></br>
       保险名称:<input type="text" name="index" id="index"/></br></br>
       <input type="button" value="提交" οnclick="checkInfo()"/>
       </form>
       <script>
       function test(){
           var a=$('#bxmc').val();
           console.log(0<a.length&&a.length<4);
           if(0<a.length&&a.length<4){
               console.log('满足条件');
               return 0;
           }else{
               console.log('不满足条件');
               return 1;
           }s
           console.log(a.length);
           return 1;
       }
       function checkInfo(){
           $('#form01').submit();
       }
       </script>
   </body>