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

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;
        }
      }
    });
  }
});

你可能感兴趣的:(vue)