一/ 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' } // ⑤
],
}
}
}