vue input 非空及数据格式判断---非插件，阻断alert-CSDN博客

本文链接：https://blog.csdn.net/wxyf2018/article/details/90239779

本文介绍了如何在Vue应用中实现输入框的非空和数据格式检查，以提升用户体验并减少无效的前后端交互。通过设置共用的判断规则，确保在多个输入框不合规时，仅显示第一条错误提示，避免连续弹出alert对话框。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在前端页面中，有很多输入框，在将数据提交到后端之前，前端需要对输入框的数据格式及是否为空做出判断，减少前后端交互次数，提高用户体验,提高系统处理效率有很大作用。但当一个页面多个输入框不符合判断规则，会一个一个alert,用户体验极差，我们的目标是在客户提交数据时，如果多个输入框不符合规则，也只提示最先触发alert的那条提示，后续alert全部阻断。------随笔记录！

<span style="align:center;"><input type="checkbox" class="check_box" v-model="ty"/></span>

共用的判断规则

	//身份证格式判断
    judgeIdNo(idNo){
        var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
        return reg.test(idNo);
    },
    //手机号码格式判断
    judgePhoneNo(phoneNo){
        var reg = /^1[3-9][0-9]\d{8}$/;
        return reg.test(phoneNo);
    },
    //电子邮箱格式判断
    judgeEmail(email){
        var myreg = /^([a-zA-Z0-9]+[_|\_|\.|\-]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[-|_|\_|\.|\-]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
        return myreg.test(this.obj.email);
    },
    //根据身份证号做性别判断
    isFemaleByIdNo(idNo){
        let holderSexNums = idNo.charAt(idNo.length - 2);
        if(holderSexNums % 2 == 0){
            return true;
        }else{
            return false;
        }
    }

input输入框数据非空及格式判断案例

    judgeInsured(){
        if(this.obj.holder_phone == ''){
            alert("手机号码不能为空");
            return true;
        }else if(!this.judgePhoneNo(this.obj.holder_phone)){
            alert("手机号码格式错误");
            return true;
        }
        
         if(this.obj.insurant_name == ''){
             alert("姓名不能为空");
             return true;
         }
         if(this.obj.insurant_id_no == ''){
             alert("身份证号码不能为空");
             return true;
         }else if(!this.judgeIdNo(this.obj.insurant_id_no)){
             alert('身份证号码格式错误');
             return true;
         }else if(!this.isFemaleByIdNo(this.obj.insurant_id_no)){
             alert('仅限女性');
             return true;
         }
      if(this.obj.email != '' && !this.judgeEmail(this.obj.email)){
            alert("电子邮箱格式错误");
            return true;
      }
    },

    judgeTY(){
        if(!this.ty){
            alert('请确认协议')
            return true;
        }
    }

提交方法

   save_data() {
       if(this.judgeInsured()){
           return true;
       }
       if(this.judgeTY()){
           return true;
       }
       this.$http.post('insur',this.obj,'json').then(res=>{
           if(res.data.code == '0000' && res.data.date[0]){
               let url = res.data.date[0].payUrl
               window.location.href = url
           }else{
               alert(res.data.msg)
           }
       })
   }