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


Posted in Javascript onApril 17, 2017

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

不能为空格;

不能为0;

不能为汉字;

不能为其它字符;

不能大于200;

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

HTML:

<!--医生问诊金额-->
        <div class="weui-jiaj-panel">
          <div class="weui-jiaj-money-box dialog js_show">
            <div class="weui-jiaj-money-box-btn">

            </div>
            <div class="weui-jiaj-money-box-three">
              <div class="weui-flex__item">
                <a id="showMoney" href="javascript:;" rel="external nofollow" class="weui-btn weui-btn_mini weui-btn_default">其它</a>
              </div>
            </div>
          </div>
        </div>
        <!--其它金额-->
        <div class="weui_dialog_alert" id="showMoneyDialog" style="display: none;">
          <div class="weui_mask"></div>
          <div class="weui_dialog">
            <div class="weui_dialog_hd"><strong class="weui_dialog_title">其它金额</strong></div>
            <div class="weui_dialog_bd">
              <div class="weui-jiaj-dialog-panel">
                <div class="weui-cell">
                  <div class="weui-cell__bd">
                    <input id="dialogPrice" type="text" required class="weui-input" placeholder="¥10" />
                  </div>
                </div>
              </div>
            </div>
            <div class="weui_dialog_ft">
              <div id="otherPriceBtn" class="weui_btn_dialog primary">确定</div>
            </div>
          </div>
        </div>

JS:

<script>
      //设置其它金额
      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-box-btn').append($titleHtml);

        //选择金额
        $('.price_btn').click(function() {
          var titleValue = $(this).attr('name'); //$(this)表示获取当前被点击元素的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: {},
            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';
            }
          });
        });
      }

      //验证
      $('input').on('blur',function(){
        var value = this.value;
        var regChinese = new RegExp("[\\u4E00-\\u9FFF]+","g");
        //字符串不能为空
        if(value.length == 0) {
          $('#otherPriceBtn').hide();
          weui.topTips('不能为空');
          //字符串是否为“空”字符即用户输入了空格
        }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('自定义金额不能大于200元');
          //自定义金额只能是数字
        }else if(typeof(parseInt(value))){
          $('#otherPriceBtn').show();
        }
      })
    </script>

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

场景二、所有违反规距的都有信息提示,但是“确定”按钮不隐藏,只是删除它的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验证数据的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery AJAX实现目录浏览与编辑的代码
Oct 21 Javascript
JS实现标签页效果(配合css)
Apr 03 Javascript
纯文字版返回顶端的js代码
Aug 01 Javascript
Jquery修改页面标题title其它JS失效的解决方法
Oct 31 Javascript
深入分析JSONP跨域的原理
Dec 10 Javascript
javascript类型系统——undefined和null全面了解
Jul 13 Javascript
100多个基础常用JS函数和语法集合大全
Feb 16 Javascript
vue动态生成dom并且自动绑定事件
Apr 19 Javascript
ES6新特性七:数组的扩充详解
Apr 21 Javascript
vue.js实现用户评论、登录、注册、及修改信息功能
May 30 Javascript
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
Nov 14 jQuery
基于Vue CSR的微前端实现方案实践
May 27 Javascript
JS与jQuery实现子窗口获取父窗口元素值的方法
Apr 17 #jQuery
bootstrap select插件封装成Vue2.0组件
Apr 17 #Javascript
JS简单获取当前日期和农历日期的方法
Apr 17 #Javascript
Vue.js仿Metronic高级表格(一)静态设计
Apr 17 #Javascript
react.js CMS 删除功能的实现方法
Apr 17 #Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
Apr 17 #Javascript
简单的JS控制button颜色随点击更改的实现方法
Apr 17 #Javascript
You might like
php 函数中使用static的说明
2012/06/01 PHP
Php中用PDO查询Mysql来避免SQL注入风险的方法
2013/04/25 PHP
php使用curl发送json格式数据实例
2013/12/17 PHP
一个对于js this关键字的问题
2007/01/09 Javascript
jquery自定义下拉列表示例
2014/04/25 Javascript
JavaScript验证电子邮箱的函数
2014/08/22 Javascript
判断window.onload是否多次使用的方法
2014/09/21 Javascript
jQuery前端分页示例分享
2015/02/10 Javascript
两种JS实现屏蔽鼠标右键的方法
2020/08/20 Javascript
javascript闭包(Closure)用法实例简析
2015/11/30 Javascript
JavaScript使用键盘输入控制实现数字验证功能
2016/08/19 Javascript
Javascript中return的使用与闭包详解
2017/01/11 Javascript
JavaScript函数表达式详解及实例
2017/05/05 Javascript
js实现图片粘贴上传到服务器并展示的实例
2017/11/08 Javascript
jQuery+SpringMVC中的复选框选择与传值实例
2018/01/08 jQuery
讲解vue-router之什么是编程式路由
2018/05/28 Javascript
mpvue+vuex搭建小程序详细教程(完整步骤)
2018/09/30 Javascript
浅谈关于JS下大批量异步任务按顺序执行解决方案一点思考
2019/01/08 Javascript
Node.js API详解之 os模块用法实例分析
2020/05/06 Javascript
基于leaflet.js实现修改地图主题样式的流程分析
2020/05/15 Javascript
python多重继承新算法C3介绍
2014/09/28 Python
Django 前后台的数据传递的方法
2017/08/08 Python
python 检查文件mime类型的方法
2018/12/08 Python
python设定并获取socket超时时间的方法
2019/01/12 Python
在Python中字典根据多项规则排序的方法
2019/01/21 Python
Python3如何对urllib和urllib2进行重构
2019/11/25 Python
Python scrapy增量爬取实例及实现过程解析
2019/12/24 Python
Python基于字典实现switch case函数调用
2020/07/22 Python
使用HTML5 Canvas绘制直线或折线等线条的方法讲解
2016/03/14 HTML / CSS
善意的谎言事例
2014/02/15 职场文书
语文教学随笔感言
2014/02/18 职场文书
手机被没收检讨书
2014/02/22 职场文书
社区巾帼文明岗事迹材料
2014/06/03 职场文书
青年联谊会致辞
2015/07/31 职场文书
简历自我评价:教师师德表现自我评价
2019/04/24 职场文书
python本地文件服务器实例教程
2021/05/02 Python