简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 禁用表单的三种方式
Blogger Information
Blog 27
fans 1
comment 2
visits 90240
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
禁用表单的三种方式
          
Original
709 people have browsed it
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport"
  6.           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>1109作业</title>
  9. <!--    作业内容：-->
  10. <!--    1. 实例演示禁用表单默认提交的三种方式-->
  11. <!--    2. 实例演示this.target,currentTarget的区别与联系-->
  12. <!--    3. (选做) 用JS实现表单中的邮箱和密码的验证(除了非空验证)-->
  13.     <style>
  14.         .a1,button {margin-left: 100px}
  15.         form{
  16.             margin: 15px 15px
  17.         }
  18.         div{padding: 8px}
  19.         p{color: #55a532}
  20.     </style>
  21. </head>
  22. <body>
  23. <!--禁用：onsubmit=" return false"-->
  24. <form action="a.php" method="post" id="login1"  >
  25.     <label class="a1">用户登陆</label><br>
  26.     <label for="phone" >手机号: <input type="text" id="phone"></label>
  27.     <div><label for="pwd" >密码：<input type="text" id="pwd"></label></div>
  28.     <button name="submit">提交</button>
  29. </form>
  30. <h4>1. 禁用表单默认提交的三种方式</h4>
  31. <ul>
  32.     <li>form处加 onsubmit=" return false"</li>
  33.     <li>通过JS事件event.preventDefault()禁用</li>
  34.     <li>修改button提交按钮的type属性，默认为type="submit"，改为type="button"</li>
  35. </ul>
  36. <hr>
  37. <h4>2. 实例演示this.target,currentTarget的区别与联系</h4>
  38. <p>如果不存在事件委托,不需要利用事件冒泡的话：</p><p>事件主体和事件绑定是二合一的状态：ev.target === ev.currentTarget</p>
  39. <p>事件绑定主体：ev.currentTarge</p>
  40. <p>事件"触发"主体: 用户实际点击的元素：ev.target</p>
  42. <script>
  43.     // 通过js禁用表单默认提交
  44.     // submit 是button name的值
  45.     document.forms.login1.submit.onclick = function (ev) {
  46.         console.log(ev);
  47.         ev.preventDefault()
  48.         console.log('已禁用表单默认提交！')
  51.     }
  52. </script>
  55. </body>
  56. </html>

执行结果：

Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！