如何设置只能输入正整数,且不能输入01,001格式（pc端/h5端不同实现方式）

一/ h5项目实现：

<!-- 允许输入正整数，调起纯数字键盘 -->
<van-field 
	v-model="submitPosParams.offset" type="digit" label="整数"  
	:rules="[{ required: true},{validator:offsetValidator, message: '范围在1-300内'}]"/>

使用van-field自定义类型digit不生效，
有时设置了digit，但还是可以输入负数，可能是版本问题：vant文档申明：

Tips: digit 类型从 2.4.2 版本开始支持

这时我们可以和正则搭配使用：

watch监听器里面：
// 限制只能输入正整数
'submitPosParams.offset':function(v) {
	// 回填值是number类型的情况，做个判断
	if(typeof v == 'number') {
		v = v
	} else {
		v = v && v.replace(/[^0-9]/g,'')
	}
	this.digit = v
},

// 限制只能输入正整数，且不能输入0，00，000；且如果输入01会被处理为1，001会被处理为1

watch监听器里面：
// 限制只能输入正整数
'submitPosParams.offset':function(v) {
	if(typeof v == 'number') {
		v = v
	} else {
		v = v && v.replace(/[^0-9]/g,'')
	}
	//
	if(v && v.length == 1 && v == 0) {
		v = ""
	} else if (v && v.length == 2) {
		if (v == '00') {
			v = ''
		} else {
			let arr = v.split('')
			//如果只有第一个数字为0，则保留第二位
			if(arr[0] == "0") {
				v = arr[1]
			} 				
		}
	} else if(v && v.length == 3) {
		if(v == '000') {
			v = ""
		} else {
			let arr = v.split('')
			// 如果第一个数字为0，第二个不为0，则保留第二三位
			if(arr[0] == '0' && arr[1] != '0') {
				v = arr[1]+arr[2]
			} else if(arr[0] == '0' && arr[1] == '0') {
				v = arr[2]
			}
		}
	}
	this.submitPosParams.offset= v
},

// 范围在1~300

methods里面：
offsetValidator(val) {
	if(val && (val > 300 || val < 1)) {
		return false
	} else {
		return true
	}
},

二/pc端项目实现

参考：自定义校验规则
https://element.eleme.cn/#/zh-CN/component/form

 <el-form-item label="签到范围/(米):" prop="offset">
   <el-input
     v-if="isCanEdit"
     v-model.trim.number="submitPosParams.offset"
     size="small"
     style="width:300px;"
     placeholder="签到点范围/(米)"
     maxlength="3"
   ></el-input>
   <span v-else>{{submitPosParams.offset}}</span>
 </el-form-item>

采用模式 ： ①②③④ 或者 干掉①②③④ ，直接采用第⑤种模式

data() {
    var checkoffSet = (rule, value, callback) => {
      console.log(rule,value,callback)
      if(value && (value < 1 || value > 300)) {
        callback(new Error('签到范围在1-300米范围内'))
      } else {
        callback()    //  这里一定得写callback(),不然没法正常运行
      }
    };
     var checkAllOffSet = (rule, value, callback) => {
      console.log(rule,value,callback)
      if(!value) {
        return callback(new Error('请填写签到点范围'))
      }
      setTimeout(()=>{
        if(!Number.isInteger(value)) {
          callback(new Error('请输入数字值'))
        } else {
          if(value < 1 || value > 300) {
            callback(new Error('签到范围在1-300米范围内'))
          } else {
            callback()
          }
        }
      },300)
    }; 
	return {
		 rules: {
	        offset: [
	          { required: true, message: "请填写签到点范围", trigger: "blur" },  // ①
	          { type: "number", message: "签到点范围只能为数字", trigger: "blur" }, // ②
	          { pattern: /^[1-9]\d*$/, message: "请输入1~9的数字值",trigger: "blur"}, // ③
	          { validator: checkoffSet, trigger: 'blur' } // ④
			
	          { validator: checkAllOffSet, trigger: 'blur' } // ⑤  
	        ],
		 }	
	}
}