弹层组件的使用及前台验证

本文链接：https://blog.csdn.net/chenxi03269/article/details/50914670

本文介绍了在前端开发中如何使用layer.js弹层组件进行数据验证，特别是针对数量匹配的场景。通过示例代码展示了当用户输入的数量与计算得到的数量不一致时，如何利用layer.js显示提示信息，确保数据一致性。

摘要由CSDN通过智能技术生成

这里需要下载layer.js

具体代码如下

$('#sub_btn').click(function(){
           var bBtn = false;
           var oTem_dd = null;
           $('.dd').each(function(i,oDd){
                var iTotalNum = $('.sum_text',oDd).val();
                alert("数量="+iTotalNum+oDd)
                var aSpan = $('.people_add .fl span',oDd);

                var iPeopleNum = 0;;
                //计算人数
               aSpan.each(function(j, oSpan) {
                    var tempdataNum = oSpan.getAttribute('data-num');
                    iPeopleNum += parseInt(tempdataNum || 1);
               });
               if(iTotalNum != iPeopleNum){
                    bBtn = true;
                    oTem_dd = oDd;
                    return false;
               }
           })
           if(bBtn){
// 这里就用到到弹层组件来验证显示
               $(window).scrollTop($(oTem_dd).offset().top );
                layer.tips('请填加与体检人数相等的体检人', $('.cf_select',oTem_dd), {
                    tips: [3, 'orange'],
                    //还可配置颜色
                    time: 2000,
                    shift: 6
                })
                return false;
           }