el-input 正则表达式校验输入框不能输入汉字

<el-form :model="data1" :rules="rules" ref="ruleForm" label-width="210px" class="demo-ruleForm">
    <el-form-item label="锯路：" prop="sawKref">
      <el-input class="inptWid" v-model="data1.sawKref"  ></el-input>
  </el-form-item>
</el-form>


<div class="jz_btn">
    <el-button type="primary" style="width:150px" @click="saveSubmit('ruleForm')">保存</el-button>
  </div>

校验不能为空、长度在1到50之间以及不能输入汉字,notChinese校验不能输入汉字 

export default {
  data() {
    const notChinese= (rule, value, callback) => {
if (value) {
        if (/[\u4E00-\u9FA5]/g.test(value)) {
          callback(new Error('不能输入汉字!'));
   } else {
        callback();
    }
   }
   callback();
}

    return { 
aa:'',
 rules: {
        sawKref: [
{required: true, message: "线路编码不能为空", trigger: "blur"},
    { min: 1, max: 50, message: "长度在 1 到 50 个字符", trigger: "blur",},
    { validator: notChinese, trigger: 'blur'}
],
}
 
}
 

js部分拦截  this.$refs[formName].validate((valid) => {

 saveSubmit(formName){
      this.$refs[formName].validate((valid) => {
        console.log(valid,'valid')
          if (valid) {
            updateConfig(this.data1).then((res) => {
        if (res.code == 1) {
this.$message.success('更新成功')
this.getList()
        } else {
          this.$message({
            type: 'error',
            message: res.message
          });
        }
      });
          } else {
            this.$message({
            type: 'error',
            message: '必填项不能为空，且不能为汉字'
          });
            return false;
          }
        });


      console.log(this.data1,'data1')
    },

原文地址：https://blog.csdn.net/weixin_43923808/article/details/143691178

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！