正则表达式不允许输入汉字

第一种

<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();
     },

你可能感兴趣的:(vue,element-ui,正则,正则)