1. 程式人生 > 實用技巧 >JavaScript 正則匹配中文,中文符號,空格,全數字,以https:// 開頭的url,用於各種場景的輸入校驗

JavaScript 正則匹配中文,中文符號,空格,全數字,以https:// 開頭的url,用於各種場景的輸入校驗

業務場景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}`)
    }