如何在JavaScript中驗證電子郵件地址

有很多方法可以驗證電子郵件地址。學習正確的方法,並了解使用純JavaScript的所有選項。 在處理表單時,驗證電子郵件地址是常見的操作之一。 在聯繫表單、註冊和登錄表單等方面非常有用。 有些人認為根本不應該對電子郵件進行驗證。我認為少量的驗證,不要過度追求完美,是更好的選擇。 電子郵件驗證應遵循哪些規則? 電子郵件地址由兩部分組成:本地部分和域名部分。 本地部分可以包含 任何字母或數字字符:a-zA-Z0-9 標點符號:"(),:;<>@[\] 特殊字符:!#$%&'*+-/=?^_``{|}~ 點號.,如果它不是第一個或最後一個字符。而且不能重複出現。 域名部分可以包含 任何字母或數字字符:a-zA-Z0-9 橫槓-,如果它不是第一個或最後一個字符。可以重複出現。 使用正則表達式 驗證電子郵件地址的最佳選擇是使用正則表達式。 沒有一個通用的電子郵件驗證正則表達式。大家似乎都在使用不同的驗證方法,而大多數在線找到的正則表達式將無法通過最基本的電子郵件場景驗證,原因可能是不準確,或者並沒有計算新引入的域名或國際化電子郵件地址。 不要盲目使用任何正則表達式,請先檢查一下。 我在Glitch上建立了這個例子,它將檢查一個被認為有效的電子郵件地址列表是否通過正則表達式驗證。您可以更改正則表達式並將其與您想使用的其他正則表達式進行比較。 當前添加的正則表達式是我認為最準確的,稍微經過修正以解決多個點的問題。 注意:這不是我想出來的。我在一個Quora答案中找到它,但我不確定它是否是原始來源。 這是一個使用該正則表達式進行驗證的函數: const validate = (email) => { const expression = /(?!.\*\.{2})^([a-z\d!#$%&'\*+\-\/=?^\_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+(\.[a-z\d!#$%&'\*+\-\/=?^\_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+)\*|"((([ \t]\*\r\n)?[ \t]+)?([\x01-\x08\x0b\x0c\x0e-\x1f\x7f\x21\x23-\x5b\x5d-\x7e\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|\\[\x01-\x09\x0b\x0c\x0d-\x7f\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))\*(([ \t]\*\r\n)?[ \t]+)?")@(([a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-.\_~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]\*[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.)+([a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-.\_~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]\*[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.?$/i; return expression.test(String(email).toLowerCase()); }; 這滿足了所有常見情況,可以假設99.9%的用戶添加的電子郵件地址都可以成功驗證。 此Glitch上的代碼包含其他可以通過重新發布該項目輕松嘗試的正則表達式。 儘管相當準確,但這個正則表達式在一些邊界情況下存在一些問題,根據您的需求,您可以忽略這些問題。 對於奇怪的地址存在假陰性,例如 "very.(),:;<>[]".VERY."very@\ "very".unusual"@strange.example.com one."more\ long"@example.website.place 對於本機地址存在假陰性,例如 [[email protected]](/cdn-cgi/l/email-protection) [[email protected]](/cdn-cgi/l/email-protection) 在公開訪問的網站上幾乎沒有用處(對於在公開訪問的網站上禁用這些地址實際上是一個優勢) 同樣,在基於IP的電子郵件上有假陽性 user@[2001: DB8 :: 1] [[email protected]](/cdn-cgi/l/email-protection) 對於本地部分過長的地址存在假陽性 12345678901234[[email protected]](/cdn-cgi/l/email-protection) 您需要一個更簡單的正則表達式嗎? 上面的正則表達式非常複雜,以至於我甚至不嘗試去理解它。正規表達式大師們創建了它,並且在互聯網上流傳開來,直到我找到它為止。 在這一點上,使用它只是一個複製/粘貼的問題。 一個更簡單的解決方案只是檢查輸入的地址是否包含某個內容,然後是 @ 符號,然後是其他內容。 在這種情況下,使用以下正則表達式即可:...

如何在JavaScript函式中接受無限參數

如何實現一個接受無限參數的函式呢? 假設我們有一個名為 join() 的函式,它的任務是將我們傳遞給它的所有字符串串接起來。 例如,我們撰寫一個接受兩個字符串的原型: const join = (string1, string2) => { return string1 + string2 } 當我們調用它時,我們得到一個由我們傳遞的兩個參數串接而成的字符串: join('hi', ' flavio') // 'hi flavio' 一個簡單的方法是添加其他默認值為空字符串的參數,像這樣: const join = (string1, string2, string3 = '') => { return string1 + string2 + string3 } 但這種方法並不適用於大量參數,並且會讓我們的代碼看起來很糟糕。 相反,我們可以使用展開運算符 (...) 後跟我們想要使用的參數名稱的語法。在函式內部,該參數是一個陣列,所以我們可以簡單地調用它的 .join() 方法來串接它包含的字符串,並傳遞一個空字符串作為參數(否則默認會在字符串之間加上逗號): const join = (...strings) => { return strings.join('') } 在我們的例子中,我們還可以使用箭頭函式中提供的隱式返回語法進一步簡化: const join = (...strings) => strings.join('') 我們可以像之前一樣調用它: join('hi', ' flavio') // 'hi flavio' join('hi', ' flavio', ' it', ' is', ' a', ' beautiful day!...

如何在JavaScript的for-of循環中獲得迭代的索引值

在ES6中引入的for-of循環是遍歷數組的一個很好方法: for (const v of ['a', 'b', 'c']) { console.log(v) } 你如何獲取迭代的索引值? 這個循環沒有提供任何語法來實現這一點,但是你可以結合在ES6中引入的解構語法與調用數組的entries()方法來實現: for (const [i, v] of ['a', 'b', 'c'].entries()) { console.log(i, v) }

如何在JavaScript数组中打乱元素

簡短回答: let list = [1, 2, 3, 4, 5, 6, 7, 8, 9] list = list.sort(() => Math.random() - 0.5) 詳細回答: 我有一個需要將JavaScript數組中的元素打亂的需求。 換句話說,我想將數組元素重新排列,使其與之前的順序不同。 從這樣一個數組開始: [1, 2, 3, 4, 5, 6, 7, 8, 9] 我希望每次運行操作時都得到不同的結果,像這樣: [4, 8, 2, 9, 1, 3, 6, 5, 7] [5, 1, 2, 3, 7, 4, 9, 6, 8] [3, 1, 4, 7, 8, 6, 2, 9, 5] 下面是我想出的過程。給定數組list: const list = [1, 2, 3, 4, 5, 6, 7, 8, 9] 我們可以調用sort()方法,該方法接受一個返回值在-0....

如何在JSX中返回多個元素

如何解決 JSX 在組件中返回多個元素的限制 在編寫 React 中的 JSX 時,有一個重要注意事項:你必須返回一個父元素,而不是多個元素。 例如,這樣是不可能的: const Pets = () => { return ( <Dog /> <Cat /> ) } 解決這個問題的一種傳統方式是將組件和其他 HTML 元素包裹在一個 <div> 中: const Pets = () => { return ( <div> <Dog /> <Cat /> </div> ) } 然而,這引入了一個問題 - 我們只是為了使 JSX 工作而引入了一個不必要的 HTML 元素,但在最終的 HTML 中並不需要。 另一種解決方案是返回一個 JSX 元素的數組: const Pets = () => { return [ <Dog />, <Cat /> ] } 還有一種解決方案是使用 Fragment,這是一個相對較新的 React 功能,為我們解決了這個問題:...

如何在JSX中重複顯示一些內容

最近我遇到了在 JSX 中需要重複顯示內容的情況。 具體用例是這樣的:我有一個評級從1到5的範圍,根據評級的值我想顯示相應數量的星星,從1顆到5顆。 於是我使用了下面這段代碼: <p> {[...Array(rating)].map(() => '⭐️ ')} </p> 請注意,我在這裡使用了 JavaScript 的展開運算符 ... 來生成一個指定長度的數組。然後我使用 map 方法將內容設置為星星符號 '⭐️ '。 這樣,根據評級的數值,即可重複顯示相應數量的星星。 希望對你有所幫助!

如何在JS中將數組分成多個相等部分

我遇到了一個問題。 一個數組包含了很多項目,我想將它分成多個部分。 我想出了兩種完全不同的解決方案。 A)第一種是將數組平均分成多個部分,例如每個部分有2或3個項目 B)第二種是創建n個部分並為其添加相等的變量集合項目 不同的是我們分割的方法和原因。解決方案(A)在你不知道最後會得到多少組時很好用,而且你並不關心,但你知道你想要每個新數組中有X個項目。 解決方案(B)在你知道你想要創建多少組並且對此要求嚴格時很好用,但你並不關心每個新數組的項目數量。 換句話說,對於一個數組 [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10] 使用方案(A),我們可以創建2個項目的部分,得到 [ 1, 2 ] [ 3, 4 ] [ 5, 6 ] [ 7, 8 ] [ 9, 10 ] 或者3個項目的部分: [ 1, 2, 3 ] [ 4, 5, 6 ] [ 7, 8, 9 ] [ 10 ] 使用方案(B),我們可以將數組分成2個部分,得到: [ 1, 2, 3, 4, 5 ] [ 6, 7, 8, 9, 10 ] 或者分成3個部分,得到:...

如何在JS中獲取數組的前n個項目

給定一個JavaScript數組,如何只獲取前X個項目? 使用內置的 slice() 方法,該方法屬於每個數組實例的一部分: const arrayToCut = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10] const n = 5 //獲取前5個項目 const newArray = arrayToCut.slice(0, n) 請注意,原始數組不會在此操作中被修改。

如何在Laravel中使用Blade模板

本教程是《Laravel手冊》的一部分。從https://flaviocopes.com/access/ 下載手冊。 Laravel的視圖文件以 .blade.php 為結尾,並且是 Blade 模板。 Blade 是一個服務端模板語言。 在其基本形式下,它就是 HTML。正如你所看到的,上面我使用的這些模板只包含 HTML。 但你可以在Blade模板中做很多有趣的事情:插入數據、添加條件語句、使用循環、根據用戶是否已驗證顯示不同內容,或根據環境變量(例如生產或開發環境)顯示不同信息,等等。 以下是Blade的入門教程(更多資訊,我強烈推薦參考 官方Blade指南)。 在路由定義中,你可以將數據傳遞給Blade模板: Route::get('/test', function () { return view('test', ['name' => 'Flavio']); }); 然後在模板中使用它: <h1>{{ $name }}</h1> {{ }} 語法允許你將任何數據添加到模板中,它會自動進行HTML轉義處理。 在其中,你還可以運行任何自己喜歡的PHP function,Blade會顯示該函數的返回值。 使用 {{-- --}} 注釋: {{-- <h1>test</h1> --}} 條件語句可使用 @if 、@else 、@endif 達到: @if ($name === 'Flavio') <h1>Yo {{ $name }}</h1> @else <h1>Good morning {{ $name }}</h1> @endif 還可以使用 @elseif 和 @unless 做更複雜的條件結構。 我們還有 @switch ,可以根据變量的結果來顯示不同的內容。...

如何在Netlify functions中使用環境變數

一個關於如何在Netlify functions中使用環境變數的簡要指南。 要在 Netlify Functions 中使用環境變數,可以訪問 process.env 變量: process.env.YOUR_VARIABLE 您也可以在JS文件的開頭使用對象解構,使代碼更加精簡: const { YOUR_VARIABLE } = process.env; 因此,在程序的其餘部分中,您只需要使用 YOUR_VARIABLE。 您可以通過Netlify管理介面來設置這些變量(您也可以將它們添加到代碼庫中,但我建議使用Netlify界面,這樣您的Git存儲庫中就不會有任何機密信息)。 注意:這種方法不適用於Netlify Edge Functions,僅適用於在AWS Lambda上運行的Netlify“常規”Functions。 對於Netlify Edge Functions,您需要使用 Deno.env.get(),像這樣: Deno.env.get('YOUR_VARIABLE') 示例: export default () => new Response(Deno.env.get('YOUR_VARIABLE'))