利用JS提交表单的几种方法和验证,怎么在提交表单之前先验证--长沙网站建设_开发_设计_制作_软件_系统

利用JS提交表单的几种方法和验证,怎么在提交表单之前先验证

所属栏目：发布日期：2022-09-30 17:33浏览量：3388作者：admin

我们再开发网站等软件时需要经常用到表单提交的方式来完成比如问卷调查、留言、评论等，怎么让调单在提交之前就判断提交字段的属性，防止插入空数据，今天小编就来教大家集中方法：

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


<script type="text/javascript">
function validate(obj) {
 if (confirm("提交表单?")) {
alert(obj.value);
 return true;
 } else {
alert(obj.value);
  return false;
 }
}
</script>
<body>
<form action="https://www.jb51.net" onsubmit="return validate(document.getElementByIdx_x('myText'));"> <!—参数的这种写法注意下-->
  <input type="text" id="myText"/>
  <input type="submit" value="submit"/>
   </form>
</body>

第二种方式：通过button按钮来触发表单提交事件οnclick="submitForm();"，会忽略掉其他标签中的属性，比如form标签中的onsubmit属性就失效了。这时为了进行表单验证，可以将验证代码放在submitForm();方法中进行验证。

长沙网站建设


<script type="text/javascript">
 function validate() {
  if (confirm("提交表单?")) {
 return true;
  } else {
 return false;
  }
 }
 function submitForm() {
  if (validate()) {
 document.getElementByIdx_x("myForm").submit();
  }
 }
</script>
<body>
 <form action="https://www.jb51.net" id="myForm">
  <input type="text"/>
  <input type="button" value="submitBtn" onclick="submitForm();"/> <!—也可以使用document.getElementByIdx_x(“该按钮的id”).click();来执行onclick事件-->
 </form>
</body>

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


<script type="text/javascript">
 function validate() {
  if (confirm("提交表单?")) {
 return true;
  } else {
 return false;
  }
 }
</script>
<body>
 <form action="https://www.jb51.net">
  <input type="text"/>
  <input type="submit" value="submit" onsubmit="return validate()"/>
 </form>
</body>

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

长沙企业网站


<script type="text/javascript">
 function validate() {
  if (confirm("提交表单?")) {
 return true;
  } else {
 return false;
  }
 }
</script>
<body>
 <form action="https://www.jb51.net">
  <input type="text"/>
  <input type="submit" value="submit" onclick="return validate()"/>
 </form>
</body>

第五种方式：


<body>
 <form action="https://www.jb51.net" id="myForm">
 <input type="text"/>
 <input type="button" value="submitBtn" id="myBtn"/>
 </form>
</body>
 <script type="text/javascript">
 function validate() {
 if (confirm("提交表单?")) {
  return true;
 } else {
  return false;
 }
}

通过button按钮来触发表单提交事件οnclick="submitForm();"，会忽略掉其他标签中的属性，比如form标签中的onsubmit属性就失效了。这时为了进行表单验证，可以将验证代码放在submitForm();方法中进行验证


function submitForm() {
 if (validate()) {
 document.getElementByIdx_x("myForm").submit();
 }
}
document.getElementByIdx_x("myBtn").onclick = submitForm;
</script>

以上几种方法您学会了吗？，更多资讯与教程请关注长沙网站建设

与您携手同行，共享网络之美，互联网资深服务商

联系我们

扫一扫
技术大牛与您直接沟通

关键词

专业互联网服务经验
具有完备的项目管理
长沙高端建站设计团队
资深行业分析策划
完善、即时的售后服务
深厚的网络运营经验
前沿视觉设计、研发能力
前端代码深度符合SEO优化
时刻新技术领先研发能力
专业全面的网络营销推广能力
长沙网站建设
长沙网站开发
长沙网站设计
长沙网站制作
长沙软件开发
长沙系统开发
长沙做网站公司
长沙蒲公英网络

网址：http://www.0731pgy.com/ Email: lh@0731pgy.com

洞察趋势多维度提升品牌价值

新闻动态