解决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 相关文章推荐
asp.net+jquery滚动滚动条加载数据的下拉控件
Jun 25 Javascript
JS实现在Repeater控件中创建可隐藏区域的代码
Sep 16 Javascript
表格单元格交错着色实现思路及代码
Apr 01 Javascript
jQuery判断iframe中元素是否存在的方法
May 11 Javascript
JavaScript中的prototype和constructor简明总结
Apr 05 Javascript
JavaScript控制listbox列表框的项目上下移动的方法
Mar 18 Javascript
纯JS打造网页中checkbox和radio的美化效果
Oct 13 Javascript
Angular2实现组件交互的方法分析
Dec 19 Javascript
微信小程序slider组件使用详解
Jan 31 Javascript
使用vue2.6实现抖音【时间轮盘】屏保效果附源码
Apr 24 Javascript
vue项目初始化到登录login页面的示例
Oct 31 Javascript
Antd的table组件表格的序号自增操作
Oct 27 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 数组的一个悲剧?
2011/05/11 PHP
PHP获取文件绝对路径的代码(上一级目录)
2011/05/29 PHP
PHP对象相互引用的内存溢出实例分析
2014/08/28 PHP
在Windows XP下安装Apache+MySQL+PHP环境
2015/02/22 PHP
PHP制作登录异常ip检测功能的实例代码
2016/11/16 PHP
laravel框架中视图的基本使用方法分析
2019/11/23 PHP
javascript 贪吃蛇实现代码
2008/11/22 Javascript
基于Jquery的淡入淡出的特效基础练习
2010/12/13 Javascript
jquery cookie实现的简单换肤功能适合小网站
2013/08/25 Javascript
用Jquery实现滚动新闻
2014/02/12 Javascript
js添加select下默认的option的value和text的方法
2014/10/19 Javascript
JavaScript数据存储 Cookie篇
2016/07/02 Javascript
郁闷!ionic中获取ng-model绑定的值为undefined如何解决
2016/08/27 Javascript
AngularJS使用ng-repeat和ng-if实现数据的删选显示效果示例【适用于表单数据的显示】
2016/12/13 Javascript
Bootstrap源码学习笔记之bootstrap进度条
2016/12/24 Javascript
vue2.0 和 animate.css的结合使用
2017/12/12 Javascript
vue实现登录功能
2020/12/31 Vue.js
Python 网络编程起步(Socket发送消息)
2008/09/06 Python
Python二维码生成库qrcode安装和使用示例
2014/12/16 Python
python中eval与int的区别浅析
2019/08/11 Python
pytorch 自定义参数不更新方式
2020/01/06 Python
Python sqlite3查询操作过程解析
2020/02/20 Python
在jupyter notebook中调用.ipynb文件方式
2020/04/14 Python
Windows 下更改 jupyterlab 默认启动位置的教程详解
2020/05/18 Python
HTML5实时语音通话聊天MP3压缩传输3KB每秒
2019/08/28 HTML / CSS
马来西亚网上购物:Youbeli
2018/03/30 全球购物
英国最好的包装供应商:Priory Direct
2019/12/17 全球购物
优秀员工自荐书
2013/12/19 职场文书
职业生涯规划书结束语
2014/04/15 职场文书
快餐公司创业计划书
2014/04/29 职场文书
党的生日活动方案
2014/08/15 职场文书
教师自查自纠材料
2014/10/14 职场文书
模范教师事迹材料
2014/12/16 职场文书
聚众斗殴罪辩护词
2015/05/21 职场文书
Python Pytorch查询图像的特征从集合或数据库中查找图像
2022/04/09 Python
浅析JavaScript中的变量提升
2022/06/01 Javascript