限制字符串長度

在開發web頁面時，表單內字符串過長而超出規定長度會導致一些不必要的麻煩，

比如：

     用戶注冊時系統限制的用戶名只有8個英文字符，但是用戶輸入了10個或者更多的字符時，

就可能造成昵稱頁面顯示錯行，或者昵稱被截斷的問題。

下面是限制字符串長度的解決方案：

1，通過使用JavaScript原生的獲取屬性的方法：

#id.getAttribute("data-length");

來判斷輸入框的限制長度。

2，通過比對輸入的長度與輸入框的限制長度屬性進行比較：

if(輸入長度 > 屬性長度){
  value = value.substr(0,屬性長度); //超過長度自動截取  
}

HTML代碼：

<input type="text" data-length="6" id="limitLength" name="Iname"/>

JavaScript方法：

var  maxLength = function(tThis){
    var _v = tThis.value.replace(maxRegex,''), //獲取輸入文本(去除空格)
    _vLen = _v.length,
    dataLength = tThis.getAttribute('data-length'), //獲取限制長度
    dataModel = tThis.getAttribute('data-model'),
    subLen = dataLength;
                    
    if(_vLen > dataLength){
    tThis.value = _v.substr(0,subLen);  //判斷長度，超過長度自動截取
    }
}

完整的javaScript代碼：

var limitLength = document.getElementById('limitLength');
            var maxRegex = /\s+/g;//去除空格的正則表達式
            var  maxLength = function(tThis){
                var _v = tThis.value.replace(maxRegex,''), //獲取輸入文本(去除空格)
                    _vLen = _v.length,
                    dataLength = tThis.getAttribute('data-length'), //獲取限制長度
                    dataModel = tThis.getAttribute('data-model'),
                    subLen = dataLength;
                    
                if(_vLen > dataLength){
                    tThis.value = _v.substr(0,subLen);  //判斷長度，超過長度自動截取
                }
            }
            
            limitLength.onblur = function(){
                maxLength(this);
            }
            
            limitLength.onkeyup = function(){
                maxLength(this);
            }
            
            limitLength.onfocus = function(){
                maxLength(this);
            }

如果您感興趣，請點一下推薦額，謝謝！

掃碼關注微信公眾號：