JavaScript中登錄名的正則表達式及解析(0基礎)

JeOam 發布于2019-08-22 15:13 / 389人閱讀

摘要：簡言在中，經常會用到正則表達式來進行模式匹配。要寫出正確的正則表達式，先要定義表達式規則。重復在正則表達式中用來表示元素重復出現的次數。給出測試結果如下毛三胖子測試代碼根據以上內容，定義你自己的登錄名正則表達式吧原文鏈接

簡言

在JavaScript中，經常會用到正則表達式來進行模式匹配。例如，登錄名驗證，密碼強度驗證，字符串查找或替換等操作。現在就開始吧，零基礎寫出你的第一個正則表達式！

在做用戶注冊時，都會用到登錄名正則校驗。要寫出正確的正則表達式，先要定義表達式規則。假設登錄名做如下規則定義：

最短4位，最長16位 {4,16}

可以包含小寫大母 [a-z] 和大寫字母 [A-Z]

可以包含數字 [0-9]

可以包含下劃線 [ _ ] 和減號 [ - ]

根據以上規則，很容易給出正則表達式的字面量如下：

var pattern = /^[a-zA-Z0-9_-]{4,16}$/

測試

測試結果如下：

var pattern = /^[a-zA-Z0-9_-]{4,16}$/;
pattern.test("ifat3") = true
pattern.test("42du") = true
pattern.test("42du-_") = true
pattern.test("_42du") = true
pattern.test("42d") = false
pattern.test("42du42du42du42du1") = false
pattern.test("42du@") = false

測試代碼

解析 字面量 / /

正則表達式的字面量定義為包含在一對斜杠（/）之間的字符，例如：

var pattern = /s$/;

上述字面量匹配所有以字母“s”結尾的字符串。

字符類 [ ]

將字符放進方括號內就組成了字符類。一個字符類可以匹配它所包含的任意字符。因此，正則表達式/[abc]/就和字母“a”，“b”，“c”中的任意一個都匹配。

字符類可以使用連字符來表示字符范圍。要匹配拉丁小寫字母可以使用/[a-z]/。

[a-zA-Z0-9_-]表示匹配任意的拉丁大小寫字母，數字再加上下劃線和減號。

重復｛｝

在正則表達式中用{ }來表示元素重復出現的次數。

{n,m} 匹配前一項至少n次，但不能超過m次

{n,} 匹配前一項n次或更多次

{n} 匹配前一項n次

[a-zA-Z0-9_-]{4,16} 表示匹配任意的拉丁大小寫字母，數字再加上下劃線和減號出現最少4次，最多16次。

匹配位置

^ 匹配字符串的開頭，在多行檢索中，匹配一行的開頭

$ 匹配字符串的結尾，在多行檢索中，匹配一行的結尾

延伸1

根據以上說明，你一定理解了上述正則表達式所表達的含義，是不是很簡單！

假設你對上述規則不滿意，想增加一條規則，如下：

首字母只能是大小寫字母

很容易變更上述正則表達式如下：

var pattern = /^[a-zA-Z][a-zA-Z0-9_-]{3,15}$/;

給出測試結果如下：

var pattern = /^a-zA-Z{3,15}$/;
pattern.test("ifat3") = true
pattern.test("Ifat3") = true
pattern.test("du42") = true
pattern.test("42du") = false
pattern.test("d42") = false
pattern.test("du42du42du42du421") = false
pattern.test("du42@") = false

測試代碼

延伸2

如果允許中文的登錄名，變更規則，如下：

首字母只能是大小寫字母或中文基本漢字

其它位也可以包含中文基本漢字

給出如下正則表達式：

var pattern = /^[a-zA-Zu4E00-u9FA5][a-zA-Z0-9u4E00-u9FA5_-]{3,15}$/;

其中[u4E00-u9FA5]是漢字的正則匹配，包括基本漢字2萬多個，其中u4E00表示漢字“一”，具體請參見“漢字unicode編碼范圍”。

給出測試結果如下：

var pattern = /^a-zA-Zu4E00-u9FA5{3,15}$/;
pattern.test("ifat3") = true
pattern.test("Ifat3") = true
pattern.test("毛三胖子") = true
pattern.test("42du") = false
pattern.test("d42") = false
pattern.test("du42du42du42du421") = false
pattern.test("du42@") = false

測試代碼

根據以上內容，定義你自己的登錄名正則表達式吧！

原文鏈接

云服務器 GPU云服務器正則表達式c4 0 正則表達式基礎 0基礎學javascript 正則正則表達式

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/93274.html

【Amaple教程】3. 模板指令與狀態數據（state）

摘要：指令在上使用元素沒有設置屬性時，自動設置綁定的狀態屬性名為屬性。一個模塊的template模板、JavaScript和css之間的關系其實可以如下圖表示：showImg(https://segmentfault.com/img/bV2ht2?w=413&h=337); 如果你了解Angular、Vue動態模板，那你將會對Amaple的模板感到很熟悉，在Amaple中，template...

2shou 2019-08-30 13:52 評論0 收藏0
【Amaple教程】3. 模板指令與狀態數據（state）

摘要：指令在上使用元素沒有設置屬性時，自動設置綁定的狀態屬性名為屬性。一個模塊的template模板、JavaScript和css之間的關系其實可以如下圖表示：showImg(https://segmentfault.com/img/bV2ht2?w=413&h=337); 如果你了解Angular、Vue動態模板，那你將會對Amaple的模板感到很熟悉，在Amaple中，template...

eccozhou 2019-08-01 18:27 評論0 收藏0
【Amaple教程】3. 模板指令與狀態數據（state）

摘要：指令在上使用元素沒有設置屬性時，自動設置綁定的狀態屬性名為屬性。一個模塊的template模板、JavaScript和css之間的關系其實可以如下圖表示：showImg(https://segmentfault.com/img/bV2ht2?w=413&h=337); 如果你了解Angular、Vue動態模板，那你將會對Amaple的模板感到很熟悉，在Amaple中，template...

xiao7cn 2019-08-22 13:59 評論0 收藏0
爬蟲 - 收藏集 - 掘金

摘要：在這之前，還是有必要對一些概念超輕量級反爬蟲方案后端掘金前言爬蟲和反爬蟲日益成為每家公司的標配系統。爬蟲修煉之道——從網頁中提取結構化數據并保存（以爬取糗百文本板塊所有糗事為例） - 后端 - 掘金歡迎大家關注我的專題：爬蟲修煉之道上篇爬蟲修煉之道——編寫一個爬取多頁面的網絡爬蟲主要講解了如何使用python編寫一個可以下載多頁面的爬蟲，如何將相對URL轉為絕對URL，如何限速，...

1fe1se 2019-07-31 10:58 評論0 收藏0