文章来自: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

<  type=\"text/ \">
  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();
  }
  } 
 </ >

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\"  =\"checkForm()\">
   </div>
  </div>
  </div>
 </form>

总结

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

收藏 打印