1949啦网--小小 痛苦,是因为能力和欲望不匹配造成的

js提交form表单

提交form表单的时候瑶族一些简单的验证,验证完后才能提交,避免无效提交。

当输入用户名和密码为空的时候,需要判断。这时候就用到了校验用户名和密码,这个需要在前端页面写;有两种方法,一种是用submit提交。一种是用button提交。

表单提方法:

1、submit按钮,结合form标签的onsubmit事件  <form name="form1" method="post" action="login.php" onsubmit="return checkForm()" > </form> checkForm()需要return

2、submit按钮,结合onclik事件。   <input type="submit" value="提交表单" onclick="return checkForm()" />  checkForm()需要return

3、button按钮,结合onclik事件,  <input type="button" value="提交表单" onclick="return checkForm()" />  js中:checkForm(){document.form1.submit();} 不需要return

实例代码:表单简单验证:

<!DOCTYPE html>  <html>  	<head>  		<meta charset="UTF-8">  		<title></title>  </head>  <body>  <form action="login.php" name="form1" method="post" onsubmit="return checkForm()">      <table width="600" border="1" bordercolor="#ccc" rules="all" align="center" cellpadding="5">          <tr>              <th colspan="3" bgcolor="#0f0f0f">用户登录</th>          </tr>          <tr>              <td width="80" align="right">用户名:</td>              <td><input type="text" name="userName" onfocus="onfocus_userName()" onblur="onblur_userName"/></td>              <td width="350"><div id="result_username"></div></td>          </tr>          <tr>              <td width="80" align="right">用户密码:</td>              <td><input type="text" name="userPwd" onfocus="onfocus_userPwd()" onblur="onblur_userPwd"/></td>              <td width="350"><div id="result_userPwd"></div></td>          </tr>            <tr>              <td></td>              <td colspan="2"><input type="submit" value="提交表单"/></td>          </tr>      </table>  </form>  <script type="text/javascript">      /*用户名*/      //获取焦点:当光标接入某个文本框时触发      function onfocus_userName(){          /*获取id=result_username的元素对象*/          var divObj=document.getElementById("result_username");          /*写入提示信息*/          divObj.innerHTML="请输入您的用户名:";          divObj.style.color="#ccc";      }      //失去焦点:当光标离开某个文本框时触发      function onblur_userName(){          /*获取name=userName和id=result_username的元素对象*/          var inputObj=document.form1.userName;          var divObj=document.getElementById("result_username");          /*用户名验证*/          if(document.form1.userName.value=""){              divObj.innerHTML="对不起,用户名不能为空";              divObj.style.color="red";              return false;          }else if(document.form1.userName.value.length<5||document.form1.userName.value.length>20){              divObj.innerHTML="用户名长度必须介于5-20个字符之间";              divObj.style.color="red";              return false;          }else{              divObj.innerHTML="ok";              return true;          }      }        /*用户密码*/      //获取焦点:当光标接入某个文本框时触发      function onfocus_userPwd(){          /*获取id=result_userPwd的元素对象*/          var divObj=document.getElementById("result_userPwd");          /*写入提示信息*/          divObj.innerHTML="请输入您的密码:";          divObj.style.color="#ccc";      }      //失去焦点:当光标离开某个文本框时触发      function onblur_userPwd(){          /*获取name=userPwd和id=result_userPwd的元素对象*/          var inputObj=document.form1.userPwd;          var divObj=document.getElementById("result_userPwd");          /*用户密码验证*/          if(document.form1.userPwd.value=""){              divObj.innerHTML="对不起,密码不能为空";              divObj.style.color="red";              return false;          }else if(document.form1.userPwd.value.length<5||document.form1.userPwd.value.length>20){              divObj.innerHTML="密码长度必须介于5-20个字符之间!";              divObj.style.color="red";              return false;          }else{              divObj.innerHTML="ok";              return true;          }      }      function checkForm(){          var flag_userName=onblur_userName();          var flag_userPwd=onblur_userPwd();          if(flag_userName&&flag_userPwd){              /*提交表单*/              return true;          }else{              //阻止表单提交              return false;          }      }  </script>  </body>  </html>

输出:

原文链接:https://www.qiquanji.com/post/8562.html

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。

微信扫码关注

更新实时通知

作者:xialibing 分类:网页教程 浏览: