第一种
<el-form-item
label="类目名称"
:label-width="formLabelWidth"
prop="name"
:rules="{ required: true, message: '类目名称不能为空', trigger: 'blur'}">
<el-input v-model="form.name" autocomplete="off" maxlength="10" show-word-limit @keyup.native="reversedMessage"></el-input>
</el-form-item>
reversedMessage() {
console.log(this.form.name);
if (!this.form.name) return;
//第一种如果包含中文弹出提示信息
if (!/^[^\u4e00-\u9fa5]{1,10}$/g.test(this.form.name)) {
return alert('类目名称不能输入汉字!')
}
//第二种如果包含中文直接清空
//this.form.name = this.form.name.replace(/^[^\u4e00-\u9fa5]{1,10}$/g,'')
},
第二种
<el-form-item
label="类目名称"
:label-width="formLabelWidth"
prop="name"
:rules="[
{ required: true, message: '类目名称不能为空', trigger: 'blur'},
{ validator: checkData, trigger: 'blur'}
]">
<el-input v-model="form.name" autocomplete="off" maxlength="10" show-word-limit></el-input>
</el-form-item>
checkData (rule, value, callback) {
if (value) {
if (/[\u4E00-\u9FA5]/g.test(value)) {
callback(new Error('类目名称不能输入汉字!'));
} else {
callback();
}
}
callback();
},