vue,jQuery,原生js實現輸入框的金額校驗

vue:

html代碼:

<div id="app">
    <input class="layui-input" v-model="payMoney" id="payMoney" placeholder="請輸入"  
                               @blur="payMoneyCheck"/>
</div>

 js代碼:

var vm = new Vue({
            el: '#app',
            data: {
                payMoney:0.00
            },
            methods: {
                 moneyCheck: function () {
                    //保留兩位有效數字
                    var reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;
                    if (vm.payMoney!= "" && !reg.test(vm.payMoney)) {
                        alert("請輸入有效金額!");
                        vm.payMoney = "0.00";
                        return false;
                    }
                }
            }
        });

 jQuery:

html代碼(同上,略)

js代碼:

$("#payMoney").blur(function () {
            var reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;
            if ($("#payMoney").val() != "" && !reg.test($("#payMoney").val())) {
                alert("請輸入有效金額!");
                $("#payMoney").val("0.00");
                return false;
            }
        });

 原生js:

<input type="text" id="payMoney" οnchange="payMoneyCheck()">
<script>
    function payMoneyCheck(){
         var reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;
            if (document.getElementById("demo").value != "" && !reg.test(document.getElementById("demo").value)) {
                alert("請輸入有效金額!");
                document.getElementById("demo").value = 0.00;
                return false;
            }
    }
</script>

 

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