JSを利用してフォームを提出するいくつかの方法と検証(必見編)

22778 ワード
第一の方法:フォームの提出、フォームの提出が成功したかどうかを判断するために、フォームのタグにワンストップイベントを追加します.
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19 <code class="js string">"text/javascript"</code> <code class="js plain">></code> </div> <div class="line number2 index1 alt1"> <code class="js spaces">   </code> <code class="js keyword">function</code> <code class="js plain">validate(obj) {</code> </div> <div class="line number3 index2 alt2"> <code class="js spaces">    </code> <code class="js keyword">if</code> <code class="js plain">(confirm(</code> <code class="js string">" ?"</code> <code class="js plain">)) {</code> </div> <div class="line number4 index3 alt1"> <code class="js spaces">      </code> <code class="js plain">alert(obj.value);</code> </div> <div class="line number5 index4 alt2"> <code class="js spaces">      </code> <code class="js keyword">return</code> <code class="js keyword">true</code> <code class="js plain">;</code> </div> <div class="line number6 index5 alt1"> <code class="js spaces">    </code> <code class="js plain">} </code> <code class="js keyword">else</code> <code class="js plain">{</code> </div> <div class="line number7 index6 alt2"> <code class="js spaces">      </code> <code class="js plain">alert(obj.value);</code> </div> <div class="line number8 index7 alt1"> <code class="js spaces">      </code> <code class="js keyword">return</code> <code class="js keyword">false</code> <code class="js plain">;</code> </div> <div class="line number9 index8 alt2"> <code class="js spaces">    </code> <code class="js plain">}</code> </div> <div class="line number10 index9 alt1"> <code class="js spaces">   </code> <code class="js plain">}</code> </div> <div class="line number11 index10 alt2"> <code class="js spaces"> </code> <code class="js plain"> 
  
"http://www.jb51.net"onsubmit="return validate(document.getElementByIdx_x('myText'));">          "text"id="myText"/>     "submit"value="submit"/>      
・ の :buttonボタンによってフォーム イベントをトリガする.οnclick=「submitForm()」は、 のタブの を します. えば、formタグのワンストップ は になります.この はフォーム のために、 コードをsubmitForm()に くことができます.メソッドで します.
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23 <code class="js string">"text/javascript"</code> <code class="js plain">></code> </div> <div class="line number2 index1 alt1"> <code class="js spaces">   </code> <code class="js keyword">function</code> <code class="js plain">validate() {</code> </div> <div class="line number3 index2 alt2"> <code class="js spaces">    </code> <code class="js keyword">if</code> <code class="js plain">(confirm(</code> <code class="js string">" ?"</code> <code class="js plain">)) {</code> </div> <div class="line number4 index3 alt1"> <code class="js spaces">      </code> <code class="js keyword">return</code> <code class="js keyword">true</code> <code class="js plain">;</code> </div> <div class="line number5 index4 alt2"> <code class="js spaces">    </code> <code class="js plain">} </code> <code class="js keyword">else</code> <code class="js plain">{</code> </div> <div class="line number6 index5 alt1"> <code class="js spaces">      </code> <code class="js keyword">return</code> <code class="js keyword">false</code> <code class="js plain">;</code> </div> <div class="line number7 index6 alt2"> <code class="js spaces">    </code> <code class="js plain">}</code> </div> <div class="line number8 index7 alt1"> <code class="js spaces">   </code> <code class="js plain">}</code> </div> <div class="line number9 index8 alt2"> <code class="js spaces">   </code>  </div> <div class="line number10 index9 alt1"> <code class="js spaces">   </code> <code class="js keyword">function</code> <code class="js plain">submitForm() {</code> </div> <div class="line number11 index10 alt2"> <code class="js spaces">    </code> <code class="js keyword">if</code> <code class="js plain">(validate()) {</code> </div> <div class="line number12 index11 alt1"> <code class="js spaces">      </code> <code class="js plain">document.getElementByIdx_x(</code> <code class="js string">"myForm"</code> <code class="js plain">).submit();</code> </div> <div class="line number13 index12 alt2"> <code class="js spaces">    </code> <code class="js plain">}</code> </div> <div class="line number14 index13 alt1"> <code class="js spaces">   </code> <code class="js plain">}</code> </div> <div class="line number15 index14 alt2"> <code class="js spaces"> </code> <code class="js plain"> 
   "http://www.jb51.net"id="myForm">         "text"/>     "button"value="submitBtn"onclick="submitForm();"/>       
・ の :Onsbmitイベントをsubmitタグに く.formタグではなく、フォームの が になり、 ボタンをクリックして する.
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17 <code class="js string">"text/javascript"</code> <code class="js plain">></code> </div> <div class="line number2 index1 alt1"> <code class="js spaces">   </code> <code class="js keyword">function</code> <code class="js plain">validate() {</code> </div> <div class="line number3 index2 alt2"> <code class="js spaces">    </code> <code class="js keyword">if</code> <code class="js plain">(confirm(</code> <code class="js string">" ?"</code> <code class="js plain">)) {</code> </div> <div class="line number4 index3 alt1"> <code class="js spaces">      </code> <code class="js keyword">return</code> <code class="js keyword">true</code> <code class="js plain">;</code> </div> <div class="line number5 index4 alt2"> <code class="js spaces">    </code> <code class="js plain">} </code> <code class="js keyword">else</code> <code class="js plain">{</code> </div> <div class="line number6 index5 alt1"> <code class="js spaces">      </code> <code class="js keyword">return</code> <code class="js keyword">false</code> <code class="js plain">;</code> </div> <div class="line number7 index6 alt2"> <code class="js spaces">    </code> <code class="js plain">}</code> </div> <div class="line number8 index7 alt1"> <code class="js spaces">   </code> <code class="js plain">}</code> </div> <div class="line number9 index8 alt2"> <code class="js spaces"> </code> <code class="js plain"> 
   "http://www.jb51.net">         "text"/>     "submit"value="submit"onsubmit="return validate()"/>      
・ 4の :submitボタンにOclickイベントを します.このイベントはフォーム の に いられます.フォームラベルにonsubmitイベントが されたような です.
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17 <code class="js string">"text/javascript"</code> <code class="js plain">></code> </div> <div class="line number2 index1 alt1"> <code class="js spaces">   </code> <code class="js keyword">function</code> <code class="js plain">validate() {</code> </div> <div class="line number3 index2 alt2"> <code class="js spaces">    </code> <code class="js keyword">if</code> <code class="js plain">(confirm(</code> <code class="js string">" ?"</code> <code class="js plain">)) {</code> </div> <div class="line number4 index3 alt1"> <code class="js spaces">      </code> <code class="js keyword">return</code> <code class="js keyword">true</code> <code class="js plain">;</code> </div> <div class="line number5 index4 alt2"> <code class="js spaces">    </code> <code class="js plain">} </code> <code class="js keyword">else</code> <code class="js plain">{</code> </div> <div class="line number6 index5 alt1"> <code class="js spaces">      </code> <code class="js keyword">return</code> <code class="js keyword">false</code> <code class="js plain">;</code> </div> <div class="line number7 index6 alt2"> <code class="js spaces">    </code> <code class="js plain">}</code> </div> <div class="line number8 index7 alt1"> <code class="js spaces">   </code> <code class="js plain">}</code> </div> <div class="line number9 index8 alt2"> <code class="js spaces"> </code> <code class="js plain"> 
   "http://www.jb51.net">         "text"/>     "submit"value="submit"onclick="return validate()"/>      
・ の :
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
   "http://www.jb51.net"id="myForm">       "text"/>   "button"value="submitBtn"id="myBtn"/>      
 
      <code class="js string">"text/javascript"</code> <code class="js plain">></code> </div> <div class="line number11 index10 alt2"> <code class="js spaces">  </code>  </div> <div class="line number12 index11 alt1"> <code class="js spaces">   </code> <code class="js keyword">function</code> <code class="js plain">validate() {</code> </div> <div class="line number13 index12 alt2"> <code class="js spaces">      </code> <code class="js keyword">if</code> <code class="js plain">(confirm(</code> <code class="js string">" ?"</code> <code class="js plain">)) {</code> </div> <div class="line number14 index13 alt1"> <code class="js spaces">        </code> <code class="js keyword">return</code> <code class="js keyword">true</code> <code class="js plain">;</code> </div> <div class="line number15 index14 alt2"> <code class="js spaces">      </code> <code class="js plain">} </code> <code class="js keyword">else</code> <code class="js plain">{</code> </div> <div class="line number16 index15 alt1"> <code class="js spaces">        </code> <code class="js keyword">return</code> <code class="js keyword">false</code> <code class="js plain">;</code> </div> <div class="line number17 index16 alt2"> <code class="js spaces">      </code> <code class="js plain">}</code> </div> <div class="line number18 index17 alt1"> <code class="js plain">}</code> </div> </div> </td> </tr> </tbody> </table> </div> </div> </div> <p> button οnclick="submitForm();"， ， form onsubmit 。 ， submitForm(); </p> <div class="jb51code"> <div> <div id="highlighter_170216" class="syntaxhighlighter js"> <div class="toolbar"> ? </div> <table border="0"> <tbody> <tr> <td class="gutter"> <div class="line number1 index0 alt2"> 1 </div> <div class="line number2 index1 alt1"> 2 </div> <div class="line number3 index2 alt2"> 3 </div> <div class="line number4 index3 alt1"> 4 </div> <div class="line number5 index4 alt2"> 5 </div> <div class="line number6 index5 alt1"> 6 </div> <div class="line number7 index6 alt2"> 7 </div> <div class="line number8 index7 alt1"> 8 </div> </td> <td class="code"> <div> <div class="line number1 index0 alt2"> <code class="js keyword">function</code> <code class="js plain">submitForm() {</code> </div> <div class="line number2 index1 alt1"> <code class="js spaces">      </code> <code class="js keyword">if</code> <code class="js plain">(validate()) {</code> </div> <div class="line number3 index2 alt2"> <code class="js spaces">        </code> <code class="js plain">document.getElementByIdx_x(</code> <code class="js string">"myForm"</code> <code class="js plain">).submit();</code> </div> <div class="line number4 index3 alt1"> <code class="js spaces">      </code> <code class="js plain">}</code> </div> <div class="line number5 index4 alt2"> <code class="js spaces">   </code> <code class="js plain">}</code> </div> <div class="line number6 index5 alt1"> <code class="js spaces">  </code>  </div> <div class="line number7 index6 alt2"> <code class="js spaces">   </code> <code class="js plain">document.getElementByIdx_x(</code> <code class="js string">"myBtn"</code> <code class="js plain">).onclick = submitForm;</code> </div> <div class="line number8 index7 alt1"> <code class="js plain"> のJSを してフォームを するいくつかの と ( )は で さんに する です. にしてください.
:https://www.cnblogs.com/tengqiuyu/p/7611765.html
フロントエンド-easuyuiダイナミック切り替えテーマ