利用JS提交表单的几种方法和验证(必看篇)

第一种方式：表单提交，在form标签中增加onsubmit事件来判断表单提交是否成功

<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标签中的onsubmit属性就失效了。这时为了进行表单验证，可以将验证代码放在submitForm();方法中进行验证。

<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();" />

第三种方式：将onsubmit事件放在submit标签中，而不是form标签中，此时表单验证失效，点击提交按钮表单直接提交

<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()" />

第四种方式：为submit按钮添加上onclick事件，其中该事件用于表单提交的验证，功能类似于在form标签中增加了onsubmit事件一样

<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()" />

第五种方式：

  "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