v-model修饰符

有一些情况,我们不希望用户输入空格这种无意义的字符,或者其他不合法的字符可以通过下面的方法解决。

禁止输入空格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 还支持自定义修饰符:

把输入内容转换为大写。

你可能感兴趣的:(vue.js)