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

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

不能为空格；

不能为0；

不能为汉字；

不能为其它字符；

不能大于200；

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

HTML：

 
   
     

     
     

  其它

     
   
 
 
 
   
   
     其它金额
     

  
    
      
    
  

     
     
确定
     
   
 

JS：

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

//验证
      $('input').on('blur', function() {
 var value = this.value;
 var regChinese = new RegExp("[\u4E00-\u9FFF]+", "g"); //汉语
 var specialSymbol =/[`~!@#$%^&*_+<>{}/'[]]/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', 'block').text('不能为空，请重新输入');
   }, 500);
   //字符串是否为空或者全部都是空格
 } else if(value == null) {
   $('#otherPriceBtn').unbind('click');
   setTimeout(function() {
     $('.hide-description').css('display', 'block').text('不能为空，请重新输入');
   }, 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: {},
dataType: 'json',
type: "post",
url: postDoctorPrice().replace("{userId}", userId).replace("{price}", 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';
}
     });
   });
 }
      })

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