JavaScript 正則匹配中文,中文符號,空格,全數字,以https:// 開頭的url,用於各種場景的輸入校驗
阿新 • • 發佈:2020-12-23
業務場景1:
密碼輸入框需要驗證輸入中文,中文符號,空格等情況,以便於給出錯誤提示
業務場景2:
輸入框只允許輸入數字的情況
業務場景3:
輸入框允許輸入均為數字或以https:// 開頭的url的情況
備註:
網上查閱的大部分JavaScript正則匹配都不是很滿足實際需求,或者在中文加一個英文或者數字都能校驗通過,無法滿足實際的校驗需求,使用下面的字串替換方法,並比對str替換前後的length,即可完成準確的實際校驗需求
var length = str.length // str為想要驗證的字串 console.log('length====>>>>>',length) var chinese_length = str.replace(/[\u4e00-\u9fa5]/g,'').length // chinese_length為匹配到中文後並替換成''之後的str字串長度,中間的正則匹配中文,例如str = 'te測試st',length = 6,chinese_length = 4,用於做後面的邏輯判斷 var space_length = str.replace(/\s/g,'').length // space_length 為匹配到字串中間的空格後並替換成''之後的str字串長度,中間的正則匹配字串中間的空格,例如str = 'te st',length = 5,space_length = 4,用於做後面的邏輯判斷 // 注意如果str = ' tes t ',str首部和尾部均有空格的場景,可以考慮使用trim()進行刪除,刪掉頭尾的空格後再進行操作,trim()使用方法自行查閱 console.log('space_length ====>>>>>',space_length ) var CN_punctuation_length = str.replace( /[\u3002|\uff1f|\uff01|\uff0c|\u3001|\uff1b|\uff1a|\u201c|\u201d|\u2018|\u2019|\uff08|\uff09|\u300a|\u300b|\u3008|\u3009|\u3010|\u3011|\u300e|\u300f|\u300c|\u300d|\ufe43|\ufe44|\u3014|\u3015|\u2026|\u2014|\uff5e|\ufe4f|\uffe5]/g,'').length // CN_punctuation_length 為匹配到字串的中文符號後並替換成''之後的str字串長度,中間的正則匹配字串的常用的所有中文符號,例如str = 't。e【st',length = 6,CN_punctuation_length = 4,用於做後面的邏輯判斷 console.log('CN_punctuation_length ====>>>>>',CN_punctuation_length ) if (length !== chinese_length) { throw new Error(`輸入不合法,個人連結/個人程式碼禁止使用中文:${str}`) } else if (length !== CN_punctuation_length) { throw new Error(`輸入不合法,個人連結/個人程式碼禁止使用中文符號:${str}`) } else if (length !== space_length) { throw new Error(`輸入不合法,個人連結/個人程式碼禁止使用空格:${str}`) } else { if(/^\d+$/.test(str)){ //此步驟判斷是否str均為數字組成 const code = str } else if (/(https):\/\/([\w.]+\/?)\S*/.test(str)){ //此步驟判斷是否str為https:// 開頭的url const url = str } else { throw new Error(`輸入不合法,請輸入正確的個人連結/個人程式碼:${str}`) }