移动端开发（时间验证）和（金额验证）和（重复提交）

最新推荐文章于 2024-07-24 21:04:47 发布

Amy o-O

最新推荐文章于 2024-07-24 21:04:47 发布

阅读量546

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/Amy_cloud/article/details/83144103

版权

Vue 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

如下，在下面这样一个页面当中，如果用户在网络不好的情况下，重复提交需要做得验证：
效果图如下：

在这里插入图片描述

思路如下：
1.我们定义一个全局变量 fleg = false; 来控制在提交时的一些操作；如果 fleg = false 正常提交，否则提示‘请勿重复提交’
2.在提交的过程中因为 ajax 是一个异步的操作，在这个同时更改 fleg 的值为 true, 如果提交成功了，更改 fleg 的值变为初始值 false;

代码如下：

 submit(){
            var _this = this;
            var audit_name,group_id
            if(_this.checklist001.length <= 0){
                _this.msg = '请选择审核人!'
                _this.showToast = true;
                return false;
            }
            audit_name = _this.checklist001.join(',');
            group_id=this.group_id;
            if (navigator.onLine) {        //有无网络的判断
                if( !_this.fleg ){ 
                    //调用封装好的方法提交数据
                     addRepairApply(audit_name,_this.group_id).then(res=>{
                         if( res.res > 0){
                                this.$vux.toast.show({
                                    text:res.reason
                                })
                                _this.$router.push({name:'repairRecord',query:{select_type:0}})
                            }else{
                                _this.fleg = false;
                            }
		                        })
		                        _this.fleg = true;
		                }else{
		                    _this.msg = '请勿重复提交!'
		                    _this.showToast = true;
		                }
		            } else{
		                _this.msg = '当前网络不佳!'
		                _this.showToast = true;
		                return false;
		            }
        	},

用户输入的金额判断（例如：12012.12，保留小数后面2位）：

<input type="text"  placeholder="请输入预计金额" maxlength="8" @change="onchangVal(estimated_amount)" v-model="estimated_amount">

 //验证金额
        onchangVal(val){
            var res=/^([1-9]\d{0,9}|0)([.]?|(\.\d{1,2})?)$/;
            if(!res.test(val)){
                this.msg = '金额输入错误'
                this.showToast = true;
                this.estimated_amount = null;
            }
        },

时间验证，用户选中时间不能小于当前时间：

export function getNowTime() {
    var date = new Date();
    var seperator1 = "-";//年月日分隔符
    var seperator2 = ":";//时分秒分隔符
    var month = date.getMonth() + 1; //月份是0~11，要加1为当前月
	var strDate = date.getDate();
	var hours = date.getHours();
	var minutes = date.getMinutes();
    if (month >= 1 && month <= 9) {
        month = "0" + month;
    }
    if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
	}
	if (hours >= 0 && hours <=9){
		hours = "0" + hours;
	}
	if (minutes >= 0 && minutes <=9){
		minutes = "0" + minutes;
	}
    var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate + " " + hours + seperator2 + minutes;
	return currentdate;
}


//调用方法
let nowTime = (getNowTime().slice(0,10).replace(/-/g, '') + getNowTime().slice(11,16).replace(/:/g, '')).trim();   /当前时间
let setTime = (_this.estimated_time.slice(0,10).replace(/-/g, '') + _this.estimated_time.slice(11,16).replace(/:/g, '')).trim();   //用户选中时间
 if( setTime <  nowTime ){
     _this.msg = '维修时间不能小于当前时间'
     _this.estimated_time = null;
     _this.showToast = true;
     return
 }