如何在el-input只能輸入數字，及input框數字后保留小數

問題描述

當我們開發項目時，常常想限制用戶只能輸入純數字:

 

 

 

解決辦法

<el-form-item label="角色Id*" class="redItem">

  <el-input type="text" onkeyup="value=value.replace(/[^\d]/g,'')" size="small" width="50" v-model="editRoleParam.roleID" placeholder="請輸入數字">

</el-form-item>

可以通過給input添加onkeyup事件來實現；

當輸入值的鍵盤抬起時觸發這個事件。this.value表示此輸入框的值，/\D/g為正則表達式，用來匹配所有非數字字符；

此句功能為：將輸入值為非數字的字符替換為空；

 

其他得部分正則：

// 先把非數字的都替換掉，除了數字和.

obj.value = obj.value.replace(/[^\d.]/g,"");

// 保證只有出現一個.而沒有多個.

obj.value = obj.value.replace(/\.{2,}/g,".");

// 必須保證第一個為數字而不是.

obj.value = obj.value.replace(/^\./g,"");

// 保證.只出現一次，而不能出現兩次以上

obj.value = obj.value.replace(".","$#$").replace(/\./g,"").replace("$#$",".");

// 只能輸入兩個小數

obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');

// 只能輸入六位小數

obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d{6}).*$/, '$1$2.$3');