Vue input 限制輸入正負數，小數點后保留兩位

注意：input v-model動態更新失效問題，解決方法 $nextTick()

1.限制只能輸入數字，英文

<input v-model="license_num" type="text" :change="check_num()" placeholder="請輸入">
//限制
check_num: function(){
    this.license_num = this.license_num.replace(/[^\a-\z\A-\Z0-9]/g, '');
}

2.限制只能輸入正整數

<input v-model="license_num" type="text" :change="check_num()" placeholder="請輸入">
//限制
check_num: function(){
    var license_num = this.license_num;
    license_num = license_num.replace(/[^\d]/g, ''); // 清除“數字”和“.”以外的字符
    if (license_num.indexOf('.') < 0 && license_num != '') {
         // 以上已經過濾，此處控制的是如果沒有小數點，首位不能為類似于 01、02的金額
        license_num = parseInt(license_num);
    }
    this.license_num = license_num;
}

3.限制價格只能輸入數字,且最多兩個小數

<input v-model="price" type="text" :change="check_price()" placeholder="請輸入">
//限制
check_price: function(){
    var price = '' + this.price;
    price = price
        .replace(/[^\d.]/g, '') // 清除“數字”和“.”以外的字符
        .replace(/\.{2,}/g, '.') // 只保留第一個. 清除多余的
        .replace('.', '$#$')
        .replace(/\./g, '')
        .replace('$#$', '.')
        .replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3'); // 只能輸入兩個小數
    if (price.indexOf('.') < 0 && price != '') {
        // 以上已經過濾，此處控制的是如果沒有小數點，首位不能為類似于 01、02的金額
        price = parseFloat(price);
    }
    this.price = price;
}

4.驗證手機號的正則表達式最簡化

var reg = /^1\d{10}$/;
if(!reg.test(phone)){
    alert('手機號輸入錯誤');
}

5.限制只能輸入數字，英文, 中文，下劃線

<input v-model="license_num" type="text" :change="check_num()" placeholder="請輸入">
//限制
check_num: function(){
    this.license_num = this.license_num.replace(/[^\a-\z\A-\Z0-9\u4e00-\u9fe5_]/g, '');
}

6.只允許輸入數字(整數：小數點不能輸入)

<input type="text" οnkeyup="value=value.replace(/[^\d]/g,'')" >

7.允許輸入小數(兩位小數)

<input type="text" οnkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" >

8.允許輸入小數(一位小數)

<input type="text" οnkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,1})?).*$/g, '$1')" >

9.開頭不能為0，且不能輸入小數

<input type="text" οnkeyup="value=value.replace(/[^\d]/g,'').replace(/^0{1,}/g,'')" >

10.不能輸入中文和字母例如：價格輸入

<input type="text" class="input-text" value="" οnkeyup="value=value.replace(/[\u4E00-\u9FA5]|[A-Za-z]/g,'')" >

posted @ 2022-12-08 09:27 Oopy 閱讀(2597) 評論(0) 收藏舉報

刷新頁面返回頂部

Oopy

Vue input 限制輸入正負數，小數點后保留兩位

公告

Vue input 限制輸入正負數，小數點后保留兩位