记录一下关于html5的表单验证

故事背景

接到一个小的表单需求开发，设计稿是这样的，看了一下需求文档，整个页面就两处验证，转入租盘个数，和转入售盘个数，规则是，必填以及，输入的数量不能大于当前页面上剩余租盘和售盘的数量（这数据是后台提供的），按以往的习惯，肯定是直接引入一个验证插件，然后配置一下插件的差数，就搞定了。但是今天感觉页面验证比较简单，如果引入插件的话有点大材小用，所以就想到了html5的验证。

图片.png

html5代码

<dl class="post-item">
  <dt>轉入租盤<i class="unit">個</i></dt>
  <dd><input type="number" name="rentNum" value="" placeholder="请輸入轉入租盤數" max="25" required/></dd>
</dl>
<dl class="post-item">
  <dt>轉入售盤<i class="unit">個</i></dt>
  <dd><input type="number" name="saleNum" value="" placeholder="请輸入轉入售盤數" max="15" required/></dd>
</dl> 

验证代码

        $("input[type='number']").on("invalid",function(){
            var _self = $(this).get(0);
            var _name = $(this).attr("name");
            var _valid = _self.validity;
            var _typeTxt = _name == "rentNum"? "租" : "售";

            if(_self.value){
               _self.setCustomValidity(""); 
            }
            if(_valid.valueMissing){
                _self.setCustomValidity("请输入轉入"+_typeTxt+"盤個數")
            }
            if(_valid.rangeOverflow){
                _self.setCustomValidity("轉入"+_typeTxt+"盤個數不能大於剩餘"+_typeTxt+"盤")
            }
        })

效果图

必填效果图.png
大于提示效果图.png