vue数字校验-不填写的状况以及可以输入小数点

た入场券 2022-10-02 11:52 98阅读 0赞

### vue数字校验-不填写的状况以及可以输入小数点 ###

数字校验使用(驼峰式) : v-enter-number2

<el-input v-enter-number2 v-model="dataForm.longitude" />

页面校验  
作用:校验数字范围以及不填写的情况

rules: { 
            longitude: [{ 
              validator:(rule,value,callback)=>{ 
                if(value != ""){ 
                  if((/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/).test(value) == false){ 
                    callback(new Error("请填写大于0的数字"));
                  }else{ 
                    if (value > 180) { 
                      callback(new Error("请填写小于180的数字"));
                    }else{ 
                      callback();
                    }
                  }
                }else{ 
                  callback();
                }
              },
              trigger:'blur'
            }],
          }

main.js添加全局校验  
作用:校验正数以及可以输入小数点

Vue.directive('enterNumber2', { 
      inserted: function (el) { 
        el.addEventListener("keypress",function(e){ 
          e = e || window.event;
          let charcode = typeof e.charCode == 'number' ? e.charCode : e.keyCode;
          let re = /\d/;
          if(charcode == 46){ 
            if(el.value.includes('.')){ 
              e.preventDefault();
            }
            return;
          }else if(!re.test(String.fromCharCode(charcode)) && charcode > 9 && !e.ctrlKey){ 
            if(e.preventDefault){ 
              e.preventDefault();
            }else{ 
              e.returnValue = false;
            }
          }
        });
      }
    });