การตรวจสอบอีเมล HTML5

มีคำกล่าวว่า "ด้วย HTML5 เราไม่จำเป็นต้องใช้ js หรือโค้ดฝั่งเซิร์ฟเวอร์อีกต่อไปเพื่อตรวจสอบว่าข้อมูลที่ป้อนของผู้ใช้เป็นอีเมลหรือที่อยู่ URL ที่ถูกต้องหรือไม่"

ฉันจะตรวจสอบอีเมลหลังจากผู้ใช้ป้อนได้อย่างไร? และหากไม่มี JS จะแสดงข้อความอย่างไรหากผู้ใช้ป้อนที่อยู่อีเมลของตนผิดรูปแบบ

<input type="email" pattern="[^ @]*@[^ @]*" placeholder="Enter your email">
<input type="submit" value="Submit">

ใน HTML5 คุณสามารถทำได้ดังนี้:

<form>
<input type="email" placeholder="Enter your email">
<input type="submit" value="Submit">
</form>

และเมื่อผู้ใช้กดส่งจะแสดงข้อความแสดงข้อผิดพลาดโดยอัตโนมัติเช่น:

input type=emailหน้าของwww.w3.orgบันทึกเว็บไซต์ที่อยู่อีเมลคือสตริงใด ๆ ที่ตรงกับการแสดงออกปกติต่อไปนี้:

/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/

ใช้requiredแอตทริบิวต์และpatternแอตทริบิวต์เพื่อกำหนดให้ค่าตรงกับรูปแบบนิพจน์ทั่วไป

<input
    type="text"
    pattern="/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/"
    required
>

ใช้[a-zA-Z0-9.-_]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,}สำหรับsomemail@email.com/somemail@email.com.vn

document.getElementById("email").validity.valid

ดูเหมือนจะเป็นจริงเมื่อฟิลด์ว่างหรือถูกต้อง นอกจากนี้ยังมีธงที่น่าสนใจอื่น ๆ :

ทดสอบใน Chrome

นี่คือตัวอย่างที่ฉันใช้สำหรับอินพุตอีเมลทั้งหมดของฉัน ตัวอย่างนี้คือ ASP.NET แต่ใช้กับ:

<asp:TextBox runat="server" class="form-control" placeholder="Contact's email" 
    name="contact_email" ID="contact_email" title="Contact's email (format: xxx@xxx.xxx)" 
    type="email" TextMode="Email" validate="required:true"
    pattern="[a-zA-Z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*" >
</asp:TextBox>

HTML5 ยังคงตรวจสอบความถูกต้องโดยใช้รูปแบบเมื่อไม่จำเป็น ยังไม่พบสิ่งที่เป็นผลบวกเท็จ

สิ่งนี้แสดงผลเป็น HTML ต่อไปนี้:

<input class="form-control" placeholder="Contact's email" 
    name="contact_email" id="contact_email" type="email" 
    title="Contact's email (format: xxx@xxx.xxx)" 
    pattern="[a-zA-Z0-9!#$%&amp;'*+\/=?^_`{|}~.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*">

ฉันรู้ว่าคุณไม่ได้ใช้โซลูชัน Javascript แต่มีบางสิ่งเช่นข้อความตรวจสอบความถูกต้องที่กำหนดเองซึ่งจากประสบการณ์ของฉันสามารถทำได้โดยใช้ JS เท่านั้น

นอกจากนี้เมื่อใช้ JS คุณสามารถเพิ่มการตรวจสอบความถูกต้องให้กับช่องป้อนข้อมูลทั้งหมดของอีเมลประเภทภายในไซต์ของคุณได้แบบไดนามิกแทนที่จะต้องแก้ไขทุกช่องป้อนข้อมูลเดียว

var validations ={
    email: [/^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/, 'Please enter a valid email address']
};
$(document).ready(function(){
    // Check all the input fields of type email. This function will handle all the email addresses validations
    $("input[type=email]").change( function(){
        // Set the regular expression to validate the email 
        validation = new RegExp(validations['email'][0]);
        // validate the email value against the regular expression
        if (!validation.test(this.value)){
            // If the validation fails then we show the custom error message
            this.setCustomValidity(validations['email'][1]);
            return false;
        } else {
            // This is really important. If the validation is successful you need to reset the custom error message
            this.setCustomValidity('');
        }
    });
})

สายไปหน่อยสำหรับงานปาร์ตี้ แต่นิพจน์ทั่วไปนี้ช่วยให้ฉันตรวจสอบการป้อนข้อมูลประเภทอีเมลในฝั่งไคลเอ็นต์ อย่างไรก็ตามเราควรทำการตรวจสอบในฝั่งเซิร์ฟเวอร์ด้วย

<input type="email" pattern="^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$">

คุณสามารถค้นหา regex อื่น ๆ ทุกชนิดที่นี่

TL; DR:วิธีเดียวที่ถูกต้อง 100% คือตรวจสอบ @ - ลงชื่อที่ไหนสักแห่งในที่อยู่อีเมลที่ป้อนจากนั้นโพสต์ข้อความตรวจสอบความถูกต้องไปยังที่อยู่อีเมลที่ระบุ หากสามารถปฏิบัติตามคำแนะนำในการตรวจสอบความถูกต้องในข้อความอีเมลแสดงว่าที่อยู่อีเมลที่ป้อนนั้นถูกต้อง

คำตอบยาว:

David Gilbertson เขียนเมื่อหลายปีก่อน:

มีสองคำถามที่เราต้องถาม:

1. ผู้ใช้เข้าใจหรือไม่ว่าพวกเขาควรจะพิมพ์ที่อยู่อีเมลลงในช่องนี้
2. ผู้ใช้พิมพ์ที่อยู่อีเมลของตนเองลงในช่องนี้อย่างถูกต้องหรือไม่

หากคุณมีแบบฟอร์มที่มีป้ายกำกับว่า "อีเมล" และผู้ใช้ป้อนสัญลักษณ์ "@" ไว้ที่ไหนสักแห่งก็ปลอดภัยที่จะบอกว่าพวกเขาเข้าใจว่าพวกเขาควรจะป้อนที่อยู่อีเมล ง่าย.

ต่อไปเราต้องการตรวจสอบความถูกต้องเพื่อให้แน่ใจว่าป้อนที่อยู่อีเมลถูกต้องหรือไม่

เป็นไปไม่ได้.

[... ]

การพิมพ์ผิดจะส่งผลให้ที่อยู่อีเมลไม่ถูกต้องแน่นอนแต่อาจส่งผลให้ที่อยู่อีเมลไม่ถูกต้อง

[... ]

ไม่มีประเด็นที่จะพยายามหาว่าที่อยู่อีเมล 'ถูกต้อง' หรือไม่ ผู้ใช้ที่อยู่ห่างไกลมีแนวโน้มที่จะใส่ผิดที่ถูกต้องและที่อยู่อีเมลกว่าที่พวกเขาจะป้อนไม่ถูกต้อง

กล่าวอีกนัยหนึ่งสิ่งสำคัญคือต้องสังเกตว่าการตรวจสอบความถูกต้องตามสตริงใด ๆ สามารถตรวจสอบได้ก็ต่อเมื่อไวยากรณ์ไม่ถูกต้อง ไม่สามารถตรวจสอบได้ว่าผู้ใช้สามารถดูอีเมลได้จริงหรือไม่ (เช่นเนื่องจากผู้ใช้สูญเสียข้อมูลประจำตัวไปแล้วพิมพ์ที่อยู่ของบุคคลอื่นหรือพิมพ์อีเมลที่ทำงานแทนที่อยู่อีเมลส่วนตัวสำหรับกรณีการใช้งานที่กำหนด) คำถามที่คุณถามบ่อยเพียงใดคือ " อีเมลนี้ถูกต้องตามหลักไวยากรณ์ " แทนที่จะเป็น " ฉันสามารถสื่อสารกับผู้ใช้โดยใช้ที่อยู่อีเมลที่ระบุ " ได้หรือไม่ หากคุณตรวจสอบความถูกต้องของสตริงมากกว่า "มี@" แสดงว่าคุณกำลังพยายามตอบคำถามเดิม! โดยส่วนตัวฉันมักจะสนใจเกี่ยวกับคำถามหลังเท่านั้น

นอกจากนี้ที่อยู่อีเมลบางส่วนที่อาจไม่ถูกต้องตามหลักไวยากรณ์หรือทางการเมืองก็ใช้งานไม่ได้ ยกตัวอย่างเช่นpostmaster@aiไม่ได้ในทางเทคนิคทำงานแม้ว่า TLDs ไม่ควรมีระเบียน นอกจากนี้โปรดดูการอภิปรายเกี่ยวกับการตรวจสอบความถูกต้องของอีเมลในรายชื่ออีเมล WHATWG (โดยที่ HTML5 ได้รับการออกแบบมาตั้งแต่แรก)

ใช้ HTML 5 ให้ป้อนอีเมลเช่น:

<input type="email"/>

เมื่อผู้ใช้วางเมาส์เหนือช่องป้อนข้อมูลผู้ใช้จะมีคำแนะนำเครื่องมือสั่งให้ป้อนอีเมลที่ถูกต้อง อย่างไรก็ตามแบบฟอร์ม Bootstrap มีข้อความ Tooltip ที่ดีกว่ามากเพื่อบอกให้ผู้ใช้ป้อนที่อยู่อีเมลและจะปรากฏขึ้นทันทีที่ค่าที่ป้อนไม่ตรงกับอีเมลที่ถูกต้อง

คุณสามารถทำตามรูปแบบนี้ได้เช่นกัน

<form action="/action_page.php">
  E-mail: <input type="email" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
  <input type="submit">
</form>

อ้างถึงใน W3Schools

ตาม MDN RegExp นี้สามารถตรวจสอบความถูกต้องของอีเมลได้เนื่องจากอีเมลที่ตรงตามข้อกำหนดควรตรงกับอีเมลนั้น

/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}
  [a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/

เป็นเรื่องยากมากที่จะตรวจสอบอีเมลให้ถูกต้องเพียงแค่ใช้แอตทริบิวต์ HTML5 "รูปแบบ" หากคุณไม่ใช้ "รูปแบบ" ใครบางคน @ จะถูกประมวลผล ซึ่งไม่ใช่อีเมลที่ถูกต้อง

การใช้pattern="[a-zA-Z]{3,}@[a-zA-Z]{3,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}"จะกำหนดให้ต้องใช้รูปแบบsomeone@email.comอย่างไรก็ตามหากผู้ส่งมีรูปแบบเหมือนsomeone@email.net.au(หรือคล้ายกัน) จะไม่ได้รับการตรวจสอบเพื่อแก้ไขปัญหานี้คุณสามารถวางpattern="[a-zA-Z]{3,}@[a-zA-Z]{3,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}"สิ่งนี้จะตรวจสอบความถูกต้อง ".com.au หรือ. net.au หรือเหมือนกัน

อย่างไรก็ตามการใช้สิ่งนี้จะไม่อนุญาตให้ someone@email.com ตรวจสอบความถูกต้อง เท่าที่ใช้ HTML5 เพื่อตรวจสอบความถูกต้องที่อยู่อีเมลก็ยังไม่สามารถใช้ได้กับเราทั้งหมด ในการทำสิ่งนี้ให้เสร็จสมบูรณ์คุณจะใช้สิ่งนี้:

<form>
<input id="email" type="text" name="email" pattern="[a-zA-Z]{3,}@[a-zA-Z]{3,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}" required placeholder="Enter you Email">
<br>
<input type="submit" value="Submit The Form">
</form>

หรือ:

<form>
<input id="email" type="text" name="email" pattern="[a-zA-Z]{3,}@[a-zA-Z]{3,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}" required placeholder="Enter you Email">
<br>
<input type="submit" value="Submit The Form">
</form>

อย่างไรก็ตามฉันไม่ทราบวิธีตรวจสอบที่อยู่อีเมลทั้งสองหรือทุกเวอร์ชันโดยใช้แอตทริบิวต์รูปแบบ HTML5