vue input标签通用指令校验的实现
移动端通常对于input标签要求输入有一些校验,vue的指令可达到完美校验的作用
预期效果
属性data-last_value的值用来缓存用户输入框上一次失去焦点后输入的值,lastTimes是初始化的变量,后续不会再随意更改此值,v-model一定不要和data-last_value绑定同一个变量,因为这样就起不到记住用户上一次输入值,并利用该值在校验不通过的情况下使用它
指令实现
以下3个指令可完全独立使用
校验整数
constutil={ isNumber(str){ constnum=Number(str); returnMath.floor(num)===num; } }; directives:{ int:{ inserted:(el)=>{ letoldListener=el.onblur; el.onblur=(e)=>{ if(oldListener){ oldListener(e); } constblurValue=Number(el.value); //用data-last_value属性值缓存上一次的值,以便恢复 constlastValue=el.getAttribute('data-last_value'); if(!util.isNumber(blurValue)){ util.toast('请输入数字'); el.value=lastValue; el.dispatchEvent(newEvent('input')); } if(el.value===lastValue)return; //更新上一次的值 el.setAttribute('data-last_value',el.value); } }, }, }
校验最小值
directives:{ min:{ inserted:(el,binding)=>{ constoldListener=el.onblur; el.onblur=(e)=>{ if(oldListener){ oldListener(e); } constblurValue=Number(el.value); constmin=binding.value; if(blurValue校验最大值
directives:{ max:{ //指令的定义 inserted:(el,binding)=>{ constoldListener=el.onblur; el.onblur=(e)=>{ if(oldListener){ oldListener(e); } constblurValue=Number(el.value); constmax=binding.value; if(blurValue>max){ util.toast(`最大值不能大于${max}`); el.value=max; el.dispatchEvent(newEvent('input')); } constlastValue=el.getAttribute('data-last_value'); if(el.value===lastValue)return; //更新上一次的值 el.setAttribute('data-last_value',el.value); } }, }, }小小的校验指令没想到里面还有那么多细节~~~
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。