js提交form表单方法

左手的ㄟ右手 2024-03-16 17:50 50阅读 0赞

### 方法一：JS判断提交 ###

js函数

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 </td> 
 <td> <code>function</code>&nbsp;<code>checkUser(){ </code> <code>var</code>&nbsp;<code>result&nbsp;=&nbsp;document.getElementById(</code><code>"userid"</code><code>).value;</code> <code>var</code>&nbsp;<code>password&nbsp;=&nbsp;document.getElementById(</code><code>"userpassid"</code><code>).value;</code> <code>if</code><code>(result&nbsp;==&nbsp;</code><code>""</code>&nbsp;<code>){ </code> <code>alert(</code><code>"用户名不<a href="http://www.hu6.cc/tags-337.html" title="能" rel="nofollow">能</a>为空"</code><code>);</code> <code>return</code>&nbsp;<code>false</code><code>;</code> <code>}</code> <code>if</code><code>(password&nbsp;==&nbsp;</code><code>""</code>&nbsp;<code>){ </code> <code>alert(</code><code>"密码不能为空"</code><code>);</code> <code>return</code>&nbsp;<code>false</code><code>;</code> <code>}</code><code>else</code><code>{ </code> <code>return</code>&nbsp;<code>true</code><code>;</code> <code>}</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

form表单

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 </td> 
 <td> <code>&lt;</code><code>form</code>&nbsp;<code>id</code><code>=</code><code>"formid"</code>&nbsp;<code>name</code><code>=</code><code>"myform"</code>&nbsp;<code>method</code><code>=</code><code>'post'</code>&nbsp;<code>onsubmit</code><code>=</code><code>"return&nbsp;checkUser();"</code>&nbsp;<code>&gt;</code> <code>&lt;</code><code>input</code>&nbsp;<code>type</code><code>=</code><code>"text"</code>&nbsp;<code>value</code><code>=</code><code>""</code>&nbsp;<code>class</code><code>=</code><code>"text2"</code>&nbsp;<code>name</code><code>=</code><code>"username"</code>&nbsp;<code>id</code><code>=</code><code>"userid"</code><code>/&gt;&lt;/</code><code>td</code><code>&gt;</code> <code>&lt;</code><code>input</code>&nbsp;<code>type</code><code>=</code><code>"password"</code>&nbsp;<code>value</code><code>=</code><code>""</code>&nbsp;<code>class</code><code>=</code><code>"text2"</code>&nbsp;<code>name</code><code>=</code><code>"userpass"</code>&nbsp;<code>id</code><code>=</code><code>"userpassid"</code><code>/&gt;&lt;/</code><code>td</code><code>&gt;</code> <code>&lt;</code><code>input</code>&nbsp;<code>type</code><code>=</code><code>"submit"</code>&nbsp;<code>value</code><code>=</code><code>""</code>&nbsp;<code>class</code><code>=</code><code>"btn2"</code>&nbsp;<code>/&gt;</code> <code>&lt;/</code><code>form</code><code>&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

### 方法二： ###

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 </td> 
 <td> <code>function</code>&nbsp;<code>checkUser(){ </code> <code>var</code>&nbsp;<code>result&nbsp;=&nbsp;document.getElementById(</code><code>"userid"</code><code>).value;</code> <code>var</code>&nbsp;<code>password&nbsp;=&nbsp;document.getElementById(</code><code>"passid"</code><code>).value;</code> <code>if</code><code>(!result){ </code> <code>alert(</code><code>"用户名不能为空"</code><code>);</code> <code>return</code>&nbsp;<code>false</code><code>;</code> <code>}</code> <code>if</code><code>(!password){ </code> <code>alert(</code><code>"密码不能为空"</code><code>);</code> <code>return</code>&nbsp;<code>false</code><code>;</code> <code>}</code> <code>document.getElementById(</code><code>"formid"</code><code>).submit();</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

form表格的写法，需要写id

<table> 
 <tbody> 
 <tr> 
 <td> 1 </td> 
 <td> <code>&lt;</code><code>form</code>&nbsp;<code>id</code><code>=</code><code>"formid"</code>&nbsp;<code>method</code><code>=</code><code>'post'</code><code>&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

button按钮的写法如下：

<table> 
 <tbody> 
 <tr> 
 <td> 1 </td> 
 <td> <code>&lt;</code><code>input</code>&nbsp;<code>type</code><code>=</code><code>"button"</code>&nbsp;<code>value</code><code>=</code><code>""</code>&nbsp;<code>class</code><code>=</code><code>"btn2"</code>&nbsp;<code>onclick</code><code>=</code><code>"checkUser();"</code>&nbsp;<code>/&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>