有一些情况,我们不希望用户输入空格这种无意义的字符,或者其他不合法的字符可以通过下面的方法解决。禁止输入空格v-model.trim
这样空格就无法输入了。
或者(偶尔会有问题):
按照这个使用正则替换的思路,还可以实现其他效果,如下:
只能输入数字v-model.number
如果你用的是element-ui组件,更复杂的校验可以放到el-form的validator中,如下:
formRules: {
name: [
{required: true, message: '请输入学员姓名'},
{ validator:(rule,val,cb) => {
val = val.replace(new RegExp(EmojiRanges.join('|'), 'g'), '');
val = val.trim();
if (val.includes('+') || val.includes('/') || val.includes('\\')) {
return cb(new Error('名称中不可包含+/\\特殊字符'))
}
this.studentModel.name = val;
return cb();
}, trigger: 'change' }
]
}
v-model 其他修饰符 除了像 .trim 这样的 2.x 硬编码的 v-model 修饰符外,现在 3.x 还支持自定义修饰符:
【v-model修饰符】把输入内容转换为大写。
推荐阅读
- 小程序|微信小程序转uniapp
- 前端|前端面试八股文--Vue篇(持续更新)
- axios|vue项目 使用axios封装request请求(一)
- 前端框架|vue、elementUI框架
- vue.js|vue3.x兼容tailwindcss(截至发帖)
- Vite|Vite使用.env文件
- 前端|新提案,初识CSS的object-view-box属性
- 前端|注意避坑,Vue Router 4: 路由参数在 created/setup 时不可用
- vue后台管理|vue 详情页返回列表,过滤查询条件保留