1.在vue中 使用rules形式进行校验

1.首先在vue文件的methods()中添加校验方法,这里校验方法命名为isNumber用自带的.test方法进行正则校验

 methods: {
   isNumber(rule, value, callback) {
      if (value === '') {
        return callback();
      }  //这是用来判断如果不是必须输入的,则直接跳出
      const r = /^\+?[1-9][0-9]*$/; // 正整数
      // 如果判断不符合正则,则不是正整数不能提交
      if (!r.test(value)) {
        return callback(new Error('数量必须为正整数'));
      } else {
        return callback();
      }
    },
}

2.在data()中定义的rules里使用校验规则
rules: {
  size: [{ validator: this.isNumber, trigger: 'blur' }],
},

2.在原生js中

 const r = /^\+?[1-9][0-9]*$/; // 正整数
 // 如果判断不符合正则,则不是正整数不能提交
 if (!r.test(itemsTable[i].number)) {
        alert('数量必须为正整数');
        return;
 }

3.或者直接在input中进行设置

   <el-input
        v-model="createForm.areaWide"
        //只允许输入正整数
        oninput="value=value.replace(/[^\d]/g,'')"
   ></el-input>

4.在3的基础上可以实现输入正的小数

     <el-input
          v-model="createForm.areaWide"
          //可以输入正的小数
          oninput="value=value.replace(/[^\d.]/g,'')"
     ></el-input>

 

Logo

前往低代码交流专区

更多推荐