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