js进阶 9-5 js如何确认form的提交和重置按钮
js進(jìn)階 9-5 js如何確認(rèn)form的提交和重置按鈕
一、總結(jié)
一句話總結(jié)：
1、這個(gè)并不好做：onsubmit 里面的代碼必須返回false才能取消onsubmit方法的執(zhí)行，所以，有return。注意：一般的調(diào)用肯定是沒有return的。onsubmit="return queren()"
2、onsubmit="return queren()" 這句話的意思的form的submit方法調(diào)用return queren() 這段代碼。這里可以是個(gè)函數(shù)，也可以是一段代碼，可以有返回值，也可以沒有，一般是沒有。
3、上述給了我們明白onsubmit對(duì)象事件句柄等方法的實(shí)質(zhì)：onsubmit方法是調(diào)用了這段js代碼再執(zhí)行的，如果這段js代碼沒有返回值，先執(zhí)行這段代碼，然后執(zhí)行onsubmit，如果這段代碼的返回值是false，那么onsubmit方法不再執(zhí)行，說到底就是就是onsubmit調(diào)用這一段代碼，像調(diào)用函數(shù)一樣，如果得到的返回值是true，就執(zhí)行，否則不執(zhí)行。默認(rèn)返回值是true。
?
1、注意：
1、這里是兩級(jí)return的形式。
?
1、form表單中提交button的兩種實(shí)現(xiàn)方式？
解答：button：submit????? input：submit。
2、form表單中，如何實(shí)現(xiàn)確認(rèn)form的提交和重置按鈕？
解答：兩級(jí)return。
3、form表單中，onsubmit 在提交表單之前調(diào)用 的官方名稱是什么？
解答：對(duì)象事件句柄。
4、form表單中，對(duì)象事件句柄有哪兩個(gè)？
解答：onreset 在重置表單元素之前調(diào)用。??????????? onsubmit 在提交表單之前調(diào)用。??????? 。
5、form表單中，Form 對(duì)象方法有哪些？
解答：?reset()把表單的所有輸入元素重置為它們的默認(rèn)值。??????????? Submit()提交表單。??????? 。
?
?
二、知識(shí)點(diǎn)
Form 對(duì)象方法
- reset()把表單的所有輸入元素重置為它們的默認(rèn)值。
- Submit()提交表單。
Form 對(duì)象事件句柄
- onreset 在重置表單元素之前調(diào)用。
- onsubmit 在提交表單之前調(diào)用。
?
三、實(shí)例
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>演示文檔</title> 6 <style type="text/css"> 7 </style> 8 </head> 9 <body> 10 <form id="form1" name="myform1" action="#" method="get" onsubmit="return queren()" onreset="return qingchu()"> 11 <p>昵稱：<input type="text" name="username"></p> 12 <p>密碼：<input type="password" name="password"></p> 13 <p> 14 <input type="submit" value="提交"> 15 <input type="reset" value="重置"> 16 </p> 17 </form> 18 <script type="text/javascript"> 19 // if (confirm('【確定】或【取消】')) { 20 // alert('您點(diǎn)擊了確定') 21 // }else{ 22 // alert('您點(diǎn)擊了取消') 23 // } 24 function queren(){ 25 return confirm('請(qǐng)確認(rèn)無誤后再點(diǎn)擊【確定】按鈕') 26 } 27 28 function qingchu(){ 29 return confirm('確定要清除之前填寫的內(nèi)容嗎？') 30 } 31 </script> 32 </body> 33 </html>?
?
四、onsubmit 事件
定義和用法
onsubmit 事件會(huì)在表單中的確認(rèn)按鈕被點(diǎn)擊時(shí)發(fā)生。
語法
οnsubmit="SomeJavaScriptCode"| SomeJavaScriptCode | 必需。規(guī)定該事件發(fā)生時(shí)執(zhí)行的 JavaScript。 |
支持該事件的 HTML 標(biāo)簽：
<form>支持該事件的 JavaScript 對(duì)象：
form實(shí)例
在本例中，當(dāng)用戶點(diǎn)擊提交按鈕時(shí)，會(huì)顯示一個(gè)對(duì)話框：
<form name="testform" action="jsref_onsubmit.asp" onsubmit="alert('Hello ' + testform.fname.value +'!')">What is your name?<br /> <input type="text" name="fname" /> <input type="submit" value="Submit" /></form>?
五、測(cè)試題-簡(jiǎn)答題
1、form表單中提交button的兩種實(shí)現(xiàn)方式？
解答：button：submit????? input：submit。
2、form表單中，如何實(shí)現(xiàn)確認(rèn)form的提交和重置按鈕？
解答：兩級(jí)return。
3、form表單中，onsubmit 在提交表單之前調(diào)用 的官方名稱是什么？
解答：對(duì)象事件句柄。
4、form表單中，對(duì)象事件句柄有哪兩個(gè)？
解答：onreset 在重置表單元素之前調(diào)用。??????????? onsubmit 在提交表單之前調(diào)用。??????? 。
5、form表單中，Form 對(duì)象方法有哪些？
解答：?reset()把表單的所有輸入元素重置為它們的默認(rèn)值。??????????? Submit()提交表單。??????? 。
?
?
?
?
?
?
?
轉(zhuǎn)載于:https://www.cnblogs.com/Renyi-Fan/p/9157248.html
總結(jié)
以上是生活随笔為你收集整理的js进阶 9-5 js如何确认form的提交和重置按钮的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： [react] react组件间的通信有
- 下一篇： Taro+react开发（56) 引用第