js進階 9-5 js如何確認form的提交和重置按鈕

一、總結

一句話總結：

1、這個并不好做：onsubmit 里面的代碼必須返回false才能取消onsubmit方法的執行，所以，有return。注意：一般的調用肯定是沒有return的。onsubmit="return queren()"

2、onsubmit="return queren()" 這句話的意思的form的submit方法調用return queren() 這段代碼。這里可以是個函數，也可以是一段代碼，可以有返回值，也可以沒有，一般是沒有。

3、上述給了我們明白onsubmit對象事件句柄等方法的實質：onsubmit方法是調用了這段js代碼再執行的，如果這段js代碼沒有返回值，先執行這段代碼，然后執行onsubmit，如果這段代碼的返回值是false，那么onsubmit方法不再執行，說到底就是就是onsubmit調用這一段代碼，像調用函數一樣，如果得到的返回值是true，就執行，否則不執行。默認返回值是true。

1、注意：

1、這里是兩級return的形式。

1、form表單中提交button的兩種實現方式？

解答：button：submit????? input：submit。

2、form表單中，如何實現確認form的提交和重置按鈕？

解答：兩級return。

3、form表單中，onsubmit 在提交表單之前調用的官方名稱是什么？

解答：對象事件句柄。

4、form表單中，對象事件句柄有哪兩個？

解答：onreset 在重置表單元素之前調用。??????????? onsubmit 在提交表單之前調用。??????? 。

5、form表單中，Form 對象方法有哪些？

解答：?reset()把表單的所有輸入元素重置為它們的默認值。??????????? Submit()提交表單。??????? 。

二、知識點

Form 對象方法

reset()把表單的所有輸入元素重置為它們的默認值。
Submit()提交表單。

Form 對象事件句柄

onreset 在重置表單元素之前調用。
onsubmit 在提交表單之前調用。

三、實例

 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('您點擊了確定')
21     //     }else{
22     //         alert('您點擊了取消')
23     //     }
24         function queren(){
25             return confirm('請確認無誤后再點擊【確定】按鈕')
26         }
27 
28         function qingchu(){
29             return confirm('確定要清除之前填寫的內容嗎？')
30         } 
31     </script>
32 </body>
33 </html>

四、onsubmit 事件

定義和用法

onsubmit 事件會在表單中的確認按鈕被點擊時發生。

語法

οnsubmit="SomeJavaScriptCode"

參數	描述
SomeJavaScriptCode	必需。規定該事件發生時執行的 JavaScript。

支持該事件的 HTML 標簽：

<form>

支持該事件的 JavaScript 對象：

form

實例

在本例中，當用戶點擊提交按鈕時，會顯示一個對話框：

<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>

五、測試題-簡答題