巧用weui.topTips验证数据

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

不能为空格;

不能为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:;" 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>

时间: 2024-10-14 10:32:04

巧用weui.topTips验证数据的相关文章

DRF数据验证+数据存储

1.验证数据的自定义类 class BooksDRFt(serializers.ModelSerializer): class Meta: model = Book fields = '__all__' #要验证的字段 author = serializers.CharField(required=False) #要验证的字段 name = serializers.CharField(min_length=2, error_messages{'required': '不能为空', 'min_le

腾讯第三方登陆OAuth验证 数据入库

1.在腾讯开放平台中注册应用 平台会给一个 <meta property="qc:admins" content="066705620216056762700063671645060454" /> 复制到index.html中放到外网中进行验证 2.验证成功以后会得到: App Key : 101213361 App Secret : 3bd600efbe3a1cd85f477111af410550 3. index.html 中的代码: <htm

Python 之 sklearn 交叉验证 数据拆分

本文K折验证拟采用的是 Python 中 sklearn 包中的 StratifiedKFold 方法. 方法思想详见:http://scikit-learn.org/stable/modules/cross_validation.html StratifiedKFold is a variation of k-fold which returns stratified folds: each set contains approximately the same percentage of s

工具栏ToolStrip能触发焦点控件的Leave、Validating、DataError等事件以验证数据 z

public class ToolStripEx : ToolStrip { protected override void OnClick(EventArgs e) { base.OnClick(e); Form fm = FindForm(); if (fm != null) { fm.Validate(); } } } 之所以说几乎,是因为还是有一点不同,就是Form.Validate()并不会触发焦点控件的Leave事件,所以需要该事件的猿友恐怕还得继续沿用0尺寸Button法或另想他法

巧用weui.gallery(),点击图片后预览图片

要在页面需要加载的JS文件: <script src="../js/libs/weui.min.js"></script> 可以去weui的文档中下载,这是它的demo:   https://weui.io/weui.js/ 要先给图片创建一个节点: var imgDom = $("<img class='weui-jiaj-img' />"); 因为接口中取到的图片会是很多,因此,在循环图片数据的时候,要给每个图片添加一个动态的

Struts2(十二)使用验证框架验证数据较验

一.数据验证 1.1.为什么要进行数据验证 对数据的合法性进行检查,只允许合法的数据进入应用程序 1.2.在哪里实现数据验证 客户端验证: 数据提交前在客户端验证 可使用JavaScript或者JQuery实现 特点:减少客户等待时间,减小服务器压力 服务器端验证: 在数据提交后服务器端验证 特点:防止“绕过”客户端验证提交非法数据 可以在服务器端处理数据前确保数据的合法性 1.3.Struts2有两种方式实现服务器端数据验证 使用ActionSupport编码实现验证 使用验证框架实现验证 二

用表单验证数据(1)

ModelForm:大家在写表单的时候,会发现表单中的 Field 和模型中的 Field 基本上是一模一样的,而且表单 中需要验证的数据,也就是我们模型中需要保存的.那么这时候我们就可以将模型中的字段和表单 中的字段进行绑定. 比如现在有个 Article 的模型.示例代码如下: from django.db import models from django.core import validators class Article(models.Model): title = models.

在DataGridView控件中验证数据输入

实现效果: 知识运用: DataGridView控件的公共事件CellValidating //将System.Windows.Forms.DataGridViewCellValidatingEventArgs类的Cancel属性设为true  将阻止光标离开单元格 和CellEndEdit来处理 实现代码: private void dataGridView1_CellValidating(object sender, DataGridViewCellValidatingEventArgs e

使用 Python 验证数据集中的体温是否符合正态分布

数据集地址:http://jse.amstat.org/datasets/normtemp.dat.txt 数据集描述:总共只有三列:体温.性别.心率 #代码 from scipy import stats as st import matplotlib.pyplot as plt import pandas as pd #防止乱码 mpl.rcParams['font.sans-serif'] = [u'SimHei'] mpl.rcParams['axes.unicode_minus'] =