有不少同学在使用element UI的Vue项目中不知道如何做验证，如果直接在element ui上写keyup事件会报错，这是因为element ui会默认自动在元素的上层封装一个div，这样我们写的keyup事件实际是写在div上，所以会报错。那么就说说解决办法，首先我们可以使用最简单的办法解决报错，那就是在keyup后面直接加.native就能解决了，写法：@ keyup.native ; 我们从字面的意思上来理解native，中文译为：原生的，天生的;我们可以把它理解为处理原生的DOM，而添加的标识要求是能输入正整数
那么下面我们就用代码来举例：

<div>
  <el-form-item label="开户行:" prop="bankName" >
    <el-input v-model="formData.bankName" maxlength="100"  @keyup.native="proving"/>
  </el-form-item>
</div>

proving() {
  this.formData.bankName = this.formData.bankName.replace(/[^\.\d]/g,'');
  this.formData.bankName = this.formData.bankName.replace('.','');
},

由代码可知，每次输入都会触发keyup事件，从而调用函数进行验证。

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue