vue rules以及原生js判斷字符串是否爲正整數(正小數)

 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>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章