input-number-required

時間 2019-12-08

標籤 input number required 简体版

原文原文鏈接

當input的type爲number時，有required的屬性：html

<input type=」number」 class=」aa」 />jquery

在type爲number的狀況下，若是輸入e或者爲空，利用$(「.aa」).val()獲取的值都爲空，這時提示沒法分開，但需求要求「輸入格式不正確」或「不能爲空」的提示需分開，這時不能借助單純經過validationMessage屬性爲true或false來判斷了，由於validationMessage都有值，輸入e時值爲「請輸入一個數字」，不輸入時其值爲「請填寫此字段」，都爲true，但能夠經過其具體的屬性值對應判斷；或者藉助於$('.user-define-money')[0].validity.badInput屬性進行判斷，當輸入爲e結尾時，其$('.user-define-money')[0].validity.badInput的值爲true，這時應提示「格式不正確」；當不輸入時，其$('.user-define-money')[0].validity.badInput的值爲false，這時應提示「不能爲空」；ui

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta name="format-detection" content="telephone=no">
    <script src="jquery-3.2.1.js"></script>
</head>
<body>
<div>
    <input type="number" placeholder="自定義" class="user-define-money" required />
</div>
<button class="btn-test">test</button>
<script>
    $(".btn-test").on('click',function(e){
        console.log($('.user-define-money').val())
        console.log($('.user-define-money')[0].value);
        var userValue =$('.user-define-money').val();
        alert(userValue);
        if(userValue ==""){
            if($('.user-define-money')[0].validity.badInput){
                alert("格式不正確");
                $('.user-define-money').val("");
                return ;
            }else{
                alert("不能爲空");
                $('.user-define-money').val("");
                return ;
            }
        }
        if(/^\d+(\.)?$/.test(userValue)){
            userValue = userValue.split(".")[0];
        }
        if(/^0\d+?/.test(userValue)){
            alert("格式不正確");
            $('.user-define-money').val("");
            return ;
        }
        if(userValue==''||userValue==undefined){
            alert("不能爲空");
            return;
        }else if(isNaN(userValue)||userValue==0){
            alert("格式不正確");
            $('.user-define-money').val("");
            return ;
        } else if(checkUserDefined(userValue)){
            money = userValue;
        }else{
            alert("格式不正確");
            $('.user-define-money').val("");
            return ;
        }
    })

    function checkUserDefined(value){
        if(!isNaN(value) && /^\d+(\.\d{1,2}|\.)?$/.test(value)){
            //這裏的判斷是控制非數字和小數點最多兩位的
            if(value.indexOf(".")==-1 && value.length<9){
                //這裏的判斷是輸入沒有小數點且長度最大爲8,符合條件
                return true;
            }else if(value.indexOf(".")!==-1 && value.length<=9){
                //這裏的判斷是輸入有小數點且長度最大爲8,符合條件
                return true;
            }else{
                //剩下的就是不符合條件
                return false;
            }
        }else{
            //這裏也是不符合條件
            return false;
        }
    }
</script>
</body>
</html>

Ps：解決了input的type爲number時輸入e和不輸入的兩種分開提示；但仍存在部分手機能夠輸入漢字或者其餘非法字符的狀況。spa

ps：有人知道怎麼解決上述狀況的，還望指教啊，謝謝呢scala

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。