vue校验输入框不能有中文

vue校验输入框不能有中文

vue实现表单填写输入框校验不能包含中文
目标：form表单内对编码进行校验

在el-form-item标签里“定义”，注意一定要加上 :rules=“rules”

<el-form :inline="true" :model="formInline" label-width="120px" :rules="rules" ref="formInline">
   <el-form-item label="编码：" prop="SppiCode" >
      <el-input v-model="formInline.SppiCode" placeholder="请输入编码" style="width: 220px"></el-input>
   </el-form-item>
</el-form>


在data（）中写规则，其中checkData是方法，需要在method里写
required: true 是那个红色的星星
trigger: ‘blur’ 代表鼠标动了之后就会显示出红框红色校验信息
message: ‘请选择编码’ 代表你想校验的提示信息


data() {
   return {
      rules: {
                 SppiCode: [
                 	{ required: true, message: '请选择编码', trigger: 'blur' },
                    { validator: this.checkData, trigger: 'blur' }
                 ]
            }
  }
}


或者直接写在 template 中


<!-- QQ号码不能为空 -->
<el-form :model="numberValidateForm" ref="numberValidateForm" class="demo-ruleForm">
  <el-form-item label="QQ号码：" prop="qqNumer" :rules="[ { required: true, message: 'QQ号码不能为空', trigger: 'blur' },{ validator: this.checkData, trigger: 'blur' } ]">
    <el-input class="input1" type="qqNumer" clearable v-model.number="numberValidateForm.qqNumer" autocomplete="off" placeholder="请输入QQ号做订单查询使用"></el-input>
  </el-form-item>
</el-form>


// QQ号码校验方法
checkData(rule, value, callback) {
    if (value) {
        if (/[\u4E00-\u9FA5]/g.test(value)) {
            callback(new Error('不能包含中文!'))
            this.$message.error('QQ号码不能包含中文');
        } else {
            callback()
        }
    }
    callback()
},

需要在method里写的checkData 方法

 checkData(rule, value, callback) {
    if(value) {
        if (/[\u4E00-\u9FA5]/g.test(value)) {
            callback(new Error('不能包含中文!'))
        } else {
            callback()
        }
    }
    callback()
},

参考：本文链接：https://blog.csdn.net/weixin_50188421/article/details/119250683