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' }]
            }
  }
}

• 需要在method里写的checkData 方法

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

至此，就完成了校验不能包含中文。

其中checkData方法参考的网上博客白肚皮儿博客

，目前是可执行的，如有哪里总结的不到位，请大家多多留言呦~