vue项目是基于element框架做的,在做form表单时,要做些验证,element框架也提供了自定义验证
下面是一些常见的验证
只允许输入数字:
可以直接用框架的rule去验证,但必须在model后加上number
<el-form-item label="姓名:"> <el-input v-model.number="num"></el-input> </el-form-item> num: [ {required: true, message: '请输入数量'}, {type: 'number', message: '数量必须为数字值'} ],
只允许输入数字和小数:
<el-input v-model="items.volume" oninput="value=value.replace(/[^\d.]/g,'')"></el-input>
过滤中文:
<el-input v-model="form.trailer.so_no" oninput="value=value.replace(/[\u4e00-\u9fa5]/g, '')"></el-input>
补充:
由于使用了<el-form>组件,添加了rules验证规则,导致与oninput事件的验证规则发生了冲突,所以修改如下
<el-input v-model="form.trailer.so_no" oninput="value=value.replace(/[\u4e00-\u9fa5]/g, '')" @change="deal(index,indexs,$event,'volume')"></el-input>
deal(index,indexs,value,prop){ this.form.sark_type[index].child[indexs][prop]=value },
对当前属性重新赋值,也可以把oninput事件的验证移到change事件,不过这样验证只能在失焦的时候触发
ps:由于属性层级较多,包含了多层数组,通过element自定义验证去做,要逐层拆属性,着实有点麻烦。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现