vue数字校验-不填写的状况以及可以输入小数点
java8常用特性数字校验使用(驼峰式): v-enter-number2<el-input v-enter-number2 v-model="dataForm.longitude" />页面校验作用:校验数字范围以及不填写的情况rules: {longitude: [{validator:(rule,value,callback)...
·
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;
}
}
});
}
});
开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!
更多推荐
已为社区贡献1条内容
所有评论(0)