解决JS表单验证只有第一个IF起作用的问题


Posted in Javascript onDecember 04, 2018

文章来自:https://blog.csdn.net/qq_38215042/article/details/84675988

具体代码如下所述:

if(条件语句){
 return false;
}else{
 return true;
}
if(条件语句){
 return false;
}else{
 return true;
}
if(条件语句){
 return false;
}else{
 return true;
}

你写的是不是上面这种情况?其实会出现只执行了第一个这种情况,主要是你在if else语句中都加入了,return 用来返回结果,这种方式其实是没有错的,逻辑也很通顺,不过你仔细想一想,你提交的时候如果返回的是true的话,那么你的form表单就相当于收到了一个可以提交的命令,那么他就会进行表单提交,后面的if else语句就不会执行了。

解决的方法:我用的是一种标记,先全部给他们true,如果后面的if语句条件判断为false,就弹出一个弹框进行提示,直到全部都符合条件了,才会给form表单返回一个true.进行表单提交。

有好的方法欢迎评论呦~~~~~~~~~

1:js代码

需要引入jquery

<script type="text/javascript">
  function checkForm() {
  var productName = true; 
  var chanDi = true;
  var muChanLiang = true;
  var zongChanLiang = true;
  var xiangQiang = true;
  var yuShouJia = true;
  var phone = true;
  var pattern = /^1[34578]\d{9}$/; //验证手机号正则表达式 
  if ($("#userName") == "") {
   alert("请输入产品名称!");
   /* alert($("#gsp_add_img_23").val()); */
   productName = false;
  } else if ($("#candi").val() == "") {
   alert("请输入产地!");
   chanDi = false;
  } else if ($("#muchan").val() == "") {
   alert("请输入亩产量!");
   muChanLiang = false;
  }else if ($("#zongChan").val() == "") {
   alert("请输入总产量!");
   zongChanLiang = false;
  } else if ($("#xiangqing").val() == "") {
   alert("请输入产品详情!");
   xiangQiang = false;
  } else if ($("#yushoujia").val() == "") {
   alert("请输入预售价!");
   yuShouJia = false;
  } else if (!pattern.test($("#userPhone").val())) {
   alert("手机号格式错误");
   phone = false;
  }
  if (productName == true && chanDi == true && muChanLiang == true && 
   zongChanLiang == true && xiangQiang == true && yuShouJia == true && phone == true) {
   $("#ListForm").submit();
  }
  } 
 </script>

2:form表单

<form action="$!webPath/new/fl_npsh.htm" method="post" name="ListForm"
  id="ListForm" enctype="multipart/form-data" >
  <!-- 类似首页楼层模块 -->
  <div style="width: 1020px; margin: 0 auto;">
  <div class="floor floor_purple"
   style="width: 1011px; border-top: 1px solid #eee;">
   <div class="liebiao"
   <!-- 给后台传一个id -->
   <input name="id" type="hidden" id="id" value="$!obj.id" />
   </div>
   <div class="liebiao">
   <!-- <span class="liebiao_left" style="color:red">*</span> -->
   <span class="liebiao_left">产品名称:</span> <input id="userName"
    type="text" name="product_name" class="shuruk"
    placeholder="例:灵宝SOD苹果(*必填项 *)" />
   </div>
   <div class="liebiao">
   <span class="liebiao_left">产品产地:</span> <input type="text"
    value="" name="product_origin" class="shuruk" id="candi"
    placeholder="例:灵宝寺河山(*必填项 *)" />
   </div>
   <div class="liebiao">
   <span class="liebiao_left">产品亩产量:</span> <input type="text"
    value="" name="mu_yield" class="shuruk" id="muchan"
    placeholder="例:每亩产量(*必填项 *)" />
   </div>
   <div class="liebiao">
   <span class="liebiao_left">产品总产量:</span> <input type="text"
    value="" name="sum_yield" class="shuruk"
    placeholder="例:总产量(*必填项 *)" id = 'zongChan'/>
   </div>
   <div class="liebiao" style="height: 60px;">
   <span class="liebiao_left"
    style="display: inline-block; height: 60px; line-height: 30px; float: left;">产品详情:</span>
   <textarea type="text" value="" id="xiangqing"
    name="product_details" class="shuruk02"
    placeholder="例:产品种植标准、产品优点、产品性能、储存注意事项等(*必填项 *)"></textarea>
   </div>
   <div class="liebiao">
   <span class="liebiao_left">产品预售参考价:</span> <input type="text"
    value="" id="yushoujia" name="advance_price" class="shuruk"
    placeholder="例:以每500g为单位(*必填项 *)" />
   </div>
   <div class="liebiao">
   <span class="liebiao_left">站主联系方式:</span> <input id="userPhone"
    value="" name="phone" class="shuruk" 
    placeholder="(*必填项 *)" />
   </div>
   <div class="liebiao" style="margin-top: 30px;">
   <input type="button" value="立即申请" class="tijiao" onclick="checkForm()">
   </div>
  </div>
  </div>
 </form>

总结

以上所述是小编给大家介绍的解决JS表单验证只有第一个IF起作用的问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript基础的动画教程,直观易懂
Jan 10 Javascript
基于jquery的loading效果实现代码
Nov 05 Javascript
模拟jQuery中的ready方法及实现按需加载css,js实例代码
Sep 27 Javascript
jquery 鼠标滑动显示详情应用示例
Jan 24 Javascript
JS+CSS实现模仿浏览器网页字符查找功能的方法
Feb 26 Javascript
JavaScript获得url所有参数键值表的方法
Mar 21 Javascript
BootStrap table使用方法分析
Nov 08 Javascript
Vue.directive()的用法和实例详解
Mar 04 Javascript
vue使用jsonp抓取qq音乐数据的方法
Jun 21 Javascript
vue router动态路由设置参数可选问题
Aug 21 Javascript
vscode+gulp轻松开发小程序的完整步骤
Oct 18 Javascript
javascript实现点击小图显示大图
Nov 29 Javascript
详解基于Vue,Nginx的前后端不分离部署教程
Dec 04 #Javascript
浅析Vue.js中v-bind v-model的使用和区别
Dec 04 #Javascript
在vue项目中优雅的使用SVG的方法实例详解
Dec 03 #Javascript
React事件处理的机制及原理
Dec 03 #Javascript
JointJS流程图的绘制方法
Dec 03 #Javascript
微信小程序之事件交互操作实例分析
Dec 03 #Javascript
vue-better-scroll 的使用实例代码详解
Dec 03 #Javascript
You might like
PHP正则表达式之定界符和原子介绍
2012/10/05 PHP
PHP目录与文件操作技巧总结(创建,删除,遍历,读写,修改等)
2016/09/11 PHP
ext 代码生成器
2009/08/07 Javascript
XHTML下,JS浮动代码失效的问题
2009/11/12 Javascript
Jquery为a标签的href赋值实现代码
2013/05/03 Javascript
node.js中的http.createClient方法使用说明
2014/12/15 Javascript
Javascript基础教程之JavaScript语法
2015/01/18 Javascript
JavaScript中误用/g导致的正则test()无法正确重复执行的解决方案
2016/07/27 Javascript
自动化测试读写64位操作系统的注册表
2016/08/15 Javascript
JavaScript之cookie技术详解
2016/11/18 Javascript
JavaScript制作弹出层效果
2016/12/02 Javascript
解析js如何获取css样式
2016/12/11 Javascript
简单实现jquery焦点图
2016/12/12 Javascript
jQuery 获取select选中值及清除选中状态
2016/12/13 Javascript
通过npm引用的vue组件使用详解
2017/03/02 Javascript
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
2017/04/21 jQuery
深入掌握 react的 setState的工作机制
2017/09/27 Javascript
JS 实现百度搜索功能
2018/02/01 Javascript
微信小程序激励式视频广告组件使用详解
2019/12/06 Javascript
vue中解决微信html5原生ios虚拟键返回不刷新问题
2020/10/20 Javascript
RC4文件加密的python实现方法
2015/06/30 Python
教你学会使用Python正则表达式
2017/09/07 Python
Python引用类型和值类型的区别与使用解析
2017/10/17 Python
pytorch中的自定义反向传播,求导实例
2020/01/06 Python
python读取yaml文件后修改写入本地实例
2020/04/27 Python
Python logging模块进行封装实现原理解析
2020/08/07 Python
Python 使用SFTP和FTP实现对服务器的文件下载功能
2020/12/17 Python
Python对excel的基本操作方法
2021/02/18 Python
数字漫画:comiXology
2020/06/13 全球购物
总经理司机职责
2014/02/02 职场文书
党的群众路线教育实践活动公开承诺书
2014/03/28 职场文书
党代会心得体会
2014/09/04 职场文书
单位员工收入证明样本
2014/10/09 职场文书
领导视察通讯稿
2015/07/18 职场文书
MySQL COUNT函数的使用与优化
2021/05/10 MySQL
css3 文字断裂效果
2022/04/22 HTML / CSS