共计 903 个字符,预计需要花费 3 分钟才能阅读完成。
有一些状况,咱们不心愿用户输出空格这种无意义的字符,或者其余不非法的字符能够通过上面的办法解决。
禁止输出空格 v -model.trim
<el-input v-model="test"></el-input>
<!-- 增加修饰符 -->
<el-input v-model.trim="test"></el-input>
这样空格就无奈输出了。
或者 (偶然会有问题):
<el-input oninput="value=value.replace(/\s/g,'')"v-model="studentModel.name" />
依照这个应用正则替换的思路,还能够实现其余成果,如下:
只能输出数字 v -model.number
<el-input v-model.number="studentModel.age" />
<!-- 或者 -->
<el-input oninput="value=value.replace(/\D/g,'')"v-model="studentModel.name" />
如果你用的是 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 还反对自定义修饰符:
<ChildComponent v-model.capitalize="pageTitle" />
把输出内容转换为大写。
正文完