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>