elementUI表单添加自定义验证(只能输入整数为例)

Vue 结合elementUI 的项目,今天处理的bug :输入框限制小数点的特殊输入。问题:正常输入已经限制小数点的输入,但按<回退键>再输入小数点是可以操作的。
刚开始 给标签绑定了@keyup.native="proving($event)"事件。
方法代码如下:
elementUI表单添加自定义验证(只能输入整数为例)_第1张图片
处理一 :常规输入起效,输入框内容为空,但 鼠标 点击其他地方 输入框的 内容会再显示;处理二:按<回退键>再输入小数点依然可以下一步操作的。

最后,通过自定义表单校验规则进行验证,实现限制。方法如下:
1.添加校验规则,放图:
elementUI表单添加自定义验证(只能输入整数为例)_第2张图片
2.直接在输入框 的rules添加自定义验证,如图:
elementUI表单添加自定义验证(只能输入整数为例)_第3张图片
自定义规则中,validator接受的是自定义的新规则,Error为接受的错误提示。
效果如下图:
elementUI表单添加自定义验证(只能输入整数为例)_第4张图片
bug算解决了。
如各位 dalao 有好的见解或方法,望多多指点。谢谢。
新增写法:
elementUI表单添加自定义验证(只能输入整数为例)_第5张图片

你可能感兴趣的:(elementUI表单添加自定义验证(只能输入整数为例))