巧用weui.topTips验证数据的实例

场景一、

有一个输入金额的场景，这个金额需要验证，验证说明如下：

不能为空格；

不能为0；

不能为汉字；

不能为其它字符；

不能大于200；

唯一可以的是，只有输入3~199之间的数字，下面的确定按钮才会显示，否则，隐藏这个按钮。

HTML：

Box dialog js_show">

Box-btn">

        </div>
        <div class="weui-jiaj-money-<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>-three"&gt;
          <div class="weui-flex__item"&gt;
            <a id="showMoney" href="javascript:;" rel="external <a href="https://www.jb51.cc/tag/nofollow/" target="_blank" class="keywords">nofollow</a>" class="weui-btn weui-btn_mini weui-btn_default"&gt;其它</a>
          </div>
        </div>
      </div>
    </div>
    <!--其它金额-->
    <div class="weui_dialog_alert" id="showMoneyDialog" style="display: none;"&gt;
      <div class="weui_mask"&gt;</div>
      <div class="weui_dialog"&gt;
        <div class="weui_dialog_hd"&gt;<h3 class="weui_dialog_title"&gt;其它金额</h3></div>
        <div class="weui_dialog_bd"&gt;
          <div class="weui-jiaj-dialog-panel"&gt;
            <div class="weui-cell"&gt;
              <div class="weui-cell__bd"&gt;
                <input id="dialogPrice" type="text" required class="weui-input" placeholder="￥10" />
              </div>
            </div>
          </div>
        </div>
        <div class="weui_dialog_ft"&gt;
          <div id="otherPriceBtn" class="weui_btn_dialog primary"&gt;确定</div>
        </div>
      </div>
    </div></pre>

JS：

//设置其它金额 var doctorPrices = [{ "doctorPrice": "5" },{ "doctorPrice": "10" },{ "doctorPrice": "15" },{ "doctorPrice": "20" },{ "doctorPrice": "30" },{ "doctorPrice": "60" }];

  var userId = $.cookie('doctorId');

  $(function() {
    selectedPrice();
  });

  var page = $('.page'); //顶层div
  var panel = page.find('weui-jiaj-panel');

  function selectedPrice() {
    var $titleHtml = '';
    for(var a = 0; a < doctorPrices.length; a++) {
      var priceName = doctorPrices[a].doctorPrice;
      //点周weui_btn_dialog隐藏
      $titleHtml += '<button class="price_btn weui-btn weui-btn_mini weui-btn_warn"' + 'name=' + priceName + '>' + priceName + '</button>';
      $('.price_btn').css('margin','5px');
    }
    $('.weui-jiaj-money-<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>-btn').append($titleHtml);

    //选择金额
    $('.price_btn').click(function() {
      var titleValue = $(this).attr('name'); //$(this)表示<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>当前被点击元素的name值

      var data = {
        userId: userId,price: titleValue
      };

      data = JSON.stringify(data);
      $.ajax({
        data: {},dataType: 'json',type: "post",url: postDoctorPrice().replace("{userId}",userId).replace("{price}",titleValue),contentType: 'application/json; charset=utf-8',success: function(data) {
          if(data && data.status == '200') {
            weui.topTips('提交成功');
          }
        },error: function(data) {
          location.href = 'doctor_wode.html';
        }
      });
    });

    //其它金额
    $('#otherPriceBtn').on('click',function(e) {
      var otherPrice = $('#dialogPrice').val();
      otherPrice = parseInt(otherPrice);

      otherPrice = otherPrice.toString();
      console.log("其它金额" + otherPrice);
      var data = {
        userId: userId,price: otherPrice
      };

      data = JSON.stringify(data);
      $.ajax({
        data: {},otherPrice),//post 时url带参数
        contentType: 'application/json; charset=utf-8',success: function(data) {
          if(data && data.status == '200') {
            weui.topTips('设置成功！');
          }
        },error: function(data) {
          location.href = 'doctor_wode.html';
        }
      });
    });
  }

  //验证
  $('input').on('blur',function(){
    var value = this.value;
    var regChinese = new RegExp("[\\u4E00-\\u9FFF]+","g");
    //字符串不能为空
    if(value.length == 0) {
      $('#otherPriceBtn').hide();
      weui.topTips('不能为空');
      //字符串是否为“空”字符即<a href="https://www.jb51.cc/tag/yonghu/" target="_blank" class="keywords">用户</a>输入了空格
    }else if(value.replace(/(^s*)|(s*$)/g,"").length ==0){
      $('#otherPriceBtn').hide();
      weui.topTips('不能为空');
      //字符串是否为空或者全部都是空格
    }else if(value == null){
      $('#otherPriceBtn').hide();
      weui.topTips('不能为null');
      //字符串是否为汉字
    }else if(regChinese.test(value)){
      $('#otherPriceBtn').hide();
      weui.topTips('不能输入汉字');
      //字符串不能为0
    }else if(parseInt(value) == 0){
      $('#otherPriceBtn').hide();
      weui.topTips('不能为0');
      //不能大于200
    }else if(parseInt(value) > 200){
      $('#otherPriceBtn').hide();
      weui.topTips('<a href="https://www.jb51.cc/tag/zidingyi/" target="_blank" class="keywords">自定义</a>金额不能大于200元');
      //<a href="https://www.jb51.cc/tag/zidingyi/" target="_blank" class="keywords">自定义</a>金额只能是数字
    }else if(typeof(parseInt(value))){
      $('#otherPriceBtn').show();
    }
  })
</script></pre>

场景二、所有违反规距的都有信息提示，但是“确定”按钮不隐藏，只是删除它的click事件，只有符合条件的才可以跳转

{}\/'[\]]/im; //特殊符号 //字符串不能为空 if(value.length == 0) { $('#otherPriceBtn').unbind('click'); setTimeout(function() { $('.hide-description').css('display','block').text('不能为空，请重新输入'); },500); //字符串是否为“空”字符即用户输入了空格 } else if(value.replace(/(^s*)|(s*$)/g,"").length == 0) { $('#otherPriceBtn').unbind('click'); setTimeout(function() { $('.hide-description').css('display',500); //字符串是否为空或者全部都是空格 } else if(value == null) { $('#otherPriceBtn').unbind('click'); setTimeout(function() { $('.hide-description').css('display',500); //字符串是否为汉字 } else if(regChinese.test(value)) { $('#otherPriceBtn').unbind('click'); setTimeout(function() { $('.hide-description').css('display','block').text('不能输入汉字，请重新输入'); },500); //字符串不能为0 } else if(parseInt(value) == 0) { $('#otherPriceBtn').unbind('click'); setTimeout(function() { $('.hide-description').css('display','block').text('不能为0，请重新输入'); },500); //小于3 } else if(parseInt(value) < 4) { $('#otherPriceBtn').unbind('click'); setTimeout(function() { $('.hide-description').css('display','block').text('自定义金额不能小于3，请重新输入'); },500); //不能大于200 } else if(parseInt(value) > 200) { $('#otherPriceBtn').unbind('click'); setTimeout(function() { $('.hide-description').css('display','block').text('自定义金额不能大于200，请重新输入'); },500); } else if(specialSymbol.test(value)){ //禁止输入特殊字符 $('#otherPriceBtn').unbind('click'); setTimeout(function() { $('.hide-description').css('display','block').text('不可输入！@#￥%……&*特殊字符！'); },500); //自定义金额只能是数字 } else if(typeof(parseInt(value))) { setTimeout(function() { $('.hide-description').css('display','block').text('你设置的金额为' + value); },500); //其它金额 $('#otherPriceBtn').on('click',function(e) { var otherPrice = $('#dialogPrice').val(); otherPrice = parseInt(otherPrice);

        otherPrice = otherPrice.toString();
        console.log("其它金额" + otherPrice);
        var data = {
          userId: userId,price: otherPrice
        };

        data = JSON.stringify(data);
        $.ajax({
          data: {},//post 时url带参数
          contentType: 'application/json; charset=utf-8',success: function(data) {
            if(data && data.status == '200') {
              weui.topTips('设置成功！');
            }
          },error: function(data) {
            location.href = 'doctor_wode.html';
          }
        });
      });
    }
  })</pre>

以上这篇巧用weui.topTips验证数据的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持编程之家。

原文链接：https://www.f2er.com/js/39928.html

toptips weui

上一篇：JS简单获取当前日期和农历日期的方下一篇：JavaScript实现的商品抢购倒计时功

巧用weui.topTips验证数据的实例

场景一、

猜你在找的JavaScript相关文章