一種控制html輸入框輸入長度的方法
2023-04-24 09:36:01
一種控制html輸入框輸入長度的方法
【專利摘要】本發明公開了一種控制html輸入框輸入長度的方法，該方法在頁面加載完成時，獲取網頁的全部表單元素，進行遍歷，獲取表單元素的屬性值，並與存儲驗證規則對比，如果該屬性值屬於該驗證規則，則增加maxlength屬性，並賦上相對應規則，瀏覽器兼容性處理，編輯事件中增加字符串處理功能，獲取當前值，並截取相應長度的字符串長度。採用本方法能在不影響原有功能的情況下，不用修改原有代碼就能夠對輸入框的輸入長度進行限制輸入，方便靈活。
【專利說明】一種控制html輸入框輸入長度的方法
【技術領域】
[0001]本發明涉及網絡【技術領域】，尤其涉及一種控制html輸入框輸入長度的方法。
【背景技術】
[0002]在網頁表單填寫時，一般需要對某些輸入框進行輸入長度限制，防止插入過長無效數據，但由於項目一般由多個開發人員進多模塊開發，開發人員對數據的驗證會單獨編寫邏輯代碼在當前頁面上，代碼量相對多，在某些溝通不及時的情況下，還會導致相同數據在不同頁面驗證不一致，影響數據的有效性。
[0003]申請號為CN200910147327.0的發明專利申請公開了一種表單控制項的驗證方法及裝置，具體技術方案包括:首先根據表單控制項的類型獲取用於驗證所述表單控制項的驗證規貝1J，所述驗證規則包括至少一個基本驗證規則，並建立獲取的所述驗證規則與所述表單控制項的對應關係；該驗證方法包括步驟:確定用戶當前操作的表單控制項的驗證觸發條件；當所述觸發條件滿足時，獲取與所述表單控制項對應的驗證規則；根據獲取的所述驗證規則驗證所述表單控制項，採用該技術方案，能夠簡單靈活地配置驗證規則，提高了驗證規則的復用性，並且簡化了表單的驗證過程。但是該方法採用ID對驗證規則的對應關係，同一頁面只允許存在唯一 ID，當存在同一驗證規則時，需重新編寫驗證規則組合，復用性不夠強。該技術在輸入錯誤數據時雖然禁止提交，但仍需要用戶手動修改輸入內容後再次驗證，方便性不足。
【發明內容】
[0004]本發明的目的是為了克服現有技術的缺陷，提供一種控制html輸入框輸入長度的方法，該方法通過將邏輯代碼編寫在外部javascript文件中，只要導入該文件，則能在不影響原有功能的情況下，不用修改原代碼就能夠對輸入框的輸入長度進行限制輸入，具體流程如下:
[0005]預先確定表單元素的標識，配置驗證規則，在頁面加載完成時，獲取網頁的全部表單元素，進行遍歷，獲取表單元素的屬性值，並與存儲驗證規則對比，如果該屬性值屬於該驗證規則，則增加maxlength屬性，並賦上相對應規則，瀏覽器兼容性處理，編輯事件中增加字符串處理功能，獲取當前值，並截取相應長度的字符串長度。
[0006]本發明技術方案帶來的有益效果:本發明技術方案採取編邏輯代碼編寫在外部javascript文件中，只要導入該文件，則能在不影響原有功能的情況下，不用修改原代碼就能夠對輸入框的輸入長度進行限制輸入，使用起來方便靈活。
【專利附圖】
【附圖說明】
[0007]為了更清楚地說明本發明實施例或現有技術中的技術方案，下面將對實施例或現有技術描述中所需要使用的附圖作簡單地介紹，顯而易見地，下面描述中的附圖僅僅是本發明的一些實施例，對於本領域普通技術人員來講，在不付出創造性勞動的前提下，還可以根據這些附圖獲得其它的附圖。
[0008]圖1是本發明的方法流程圖。
【具體實施方式】
[0009]下面將結合本發明實施例中的附圖，對本發明實施例中的技術方案進行清楚、完整地描述，顯然，所描述的實施例僅僅是本發明一部分實施例，而不是全部的實施例。基於本發明中的實施例，本領域普通技術人員在沒有作出創造性勞動前提下所獲得的所有其他實施例，都屬於本發明保護的範圍。
[0010]本發明的主要創新點在於不改動原有代碼以及邏輯的基礎上，能夠增加限制輸入框輸入長度的功能。如圖1所示為本發明的方法流程圖。其具體的實施步驟如下:
[0011]1.確定表單元素的標識,可以是name屬性，id屬性，或其他自定義屬性。由於id屬性當前頁面只允許存在一個，不能重複使用，其他自定義屬性不屬於表單內置屬性，功能性不明確，易導致標準不統一，因此選name屬性較為優越。
[0012]2.配置驗證規則。如 var rule = {username:3, password: 6}, username 和password是配置的name屬性值,而3和6是對應name屬性表單元素將要限制的最大長度值。
[0013]3.在頁面加載完成時，獲取網頁的全部表單元素，進行遍歷，獲取表單元素的name屬性值，name屬性值是常規表單提交必不可少的,將值與驗證規則進行對比,如name是username的則可以匹配到步驟2中的對應例值3,則name屬性為username的表單元素應限制為最大長度為3。
[0014]4.對能匹配到的表單元素進行屬性增加，增加maxlength屬性，並賦上相對應規貝U。支持html5的瀏覽器則會限制輸入框的長度限制。
[0015]5.由於某些早期瀏覽器不支持html5，如ie6/7/8，在表單元素編輯事件中，獲取當前值，並截取相應長度的字符串長度。
[0016]以上對本發明實施例所提供的一種控制html輸入框輸入長度的方法進行了詳細介紹，本文中應用了具體個例對本發明的原理及實施方式進行了闡述，以上實施例的說明只是用於幫助理解本發明的方法及其核心思想；同時，對於本領域的一般技術人員，依據本發明的思想，在【具體實施方式】及應用範圍上均會有改變之處，綜上所述，本說明書內容不應理解為對本發明的限制。
【權利要求】
1.一種控制html輸入框輸入長度的方法，其特徵在於，該方法通過將邏輯代碼編寫在外部javascript文件中，只要導入該文件,則能在不影響原有功能的情況下,不用修改原代碼就能夠對輸入框的輸入長度進行限制輸入，具體流程如下: 預先確定表單元素的標識，配置驗證規則，在頁面加載完成時，獲取網頁的全部表單元素，進行遍歷，獲取表單元素的屬性值，並與存儲驗證規則對比，如果該屬性值屬於該驗證規則，則增加maxlength屬性，並賦上相對應規則，瀏覽器兼容性處理，編輯事件中增加字符串處理功能，獲取當前值，並截取相應長度的字符串長度。
2.根據權利要求1所述的方法，其特徵在於，表單元素的標識包括name屬性，id屬性或其他自定義屬性。
3.根據權利要求1所述的方法，其特徵在於，該方法中表單元素的標識優選name屬性。
【文檔編號】G06F17/30GK104281662SQ201410494368
【公開日】2015年1月14日 申請日期:2014年9月24日 優先權日:2014年9月24日
【發明者】楊育斌, 柯宗貴, 林再賢 申請人:藍盾信息安全技術有限公司