HTML5 ईमेल सत्यापन

Question

यह कहा जाता है कि "एचटीएमएल 5 के साथ, हमें यह जांचने के लिए कि उपयोगकर्ता का इनपुट एक वैध ईमेल या यूआरएल एड्रेस है"

उपयोगकर्ता द्वारा दर्ज किए जाने के बाद मैं ईमेल को कैसे मान्य कर सकता हूं? और जेएस के बिना यदि उपयोगकर्ता अपने ईमेल पते का गलत रूप दर्ज करता है तो संदेश कैसे प्रदर्शित किया जाए।

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

Comments

आपको हमेशा सर्वर की ओर से सत्यापन करना होगा। एक चतुर क्लाइंट किसी भी क्लाइंट-साइड सुरक्षा उपाय को बायपास कर सकता है।

— बेंजामिन ग्रुएनबाम

एचटीएमएल 5 फॉर्म सत्यापन स्थापित करने की कोशिश करते समय यह उत्तर मदद कर सकता है। बेशक आप शायद अभी भी सर्वर साइड सत्यापन की आवश्यकता होगी।

— Joeytje50

regex ईमेल सत्यापन का उपयोग कभी भी किसी भी परिस्थिति में नहीं किया जाना चाहिए। रेगेक्स चेक में कई खामियां हैं। ईमेल पतों को "वैलिडेट" करने का सबसे अच्छा तरीका यह है कि आप उन्हें केवल दो बार टाइप करें और एक Regex चेक चलाएं जो उपयोगकर्ता को एक चेतावनी देता है कि यदि यह पैटर्न से मेल नहीं खाता है, तो यह वैध ईमेल पते की तरह नहीं दिखता है, और उपयोगकर्ता को दोहरी जांच करने के लिए कहता है। इस तरह, अगर यह वास्तव में वैध है, लेकिन रेगेक्स विफल हो रहा है (जैसा कि ऐसा अक्सर होता है) उपयोगकर्ता बस स्वीकार कर सकता है कि वे जानते हैं कि यह मान्य है और जारी है। बहुत अधिक साइटें रेगेक्स सत्यापन का उपयोग करती हैं और यह कई उपयोगकर्ताओं के लिए निराशाजनक है।

— साउंडफिको 4

मैं इस लेख को जांचने की सलाह देता हूं: debounce.io/blog/articles/email-validation-for-html5-forms

— इमान हज्जाज़ी

उपयोगकर्ता को एक ही ईमेल पते पर दो बार इनपुट करने के लिए कहना बेकार है। यदि आप उनके ईमेल पते को नहीं जानते हैं, तो इसे दो बार टाइप करने के लिए कहने से बाधाओं में सुधार नहीं होता है। यदि वे अपना ईमेल पता जानते हैं, तो इसे दो बार टाइप करने के लिए कहना सिर्फ गरीब यूआई है।

— मिकको रैंटलैनेन

Answer 1

HTML5 में आप ऐसा कर सकते हैं:

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

और जब उपयोगकर्ता प्रेस सबमिट करता है, तो यह स्वतः ही एक त्रुटि संदेश दिखाता है:

Comments

यहां पैटर्न का क्या फायदा है? ईमेल के रूप में प्रकार को निर्दिष्ट करने के लिए पहले से ही इसमें निर्धारित पैटर्न शामिल है।

— रिच ब्रैडशॉ

@ रीचब्रेडशॉ: हाँ, आप सही हैं। पैटर्न निर्दिष्ट करने की आवश्यकता नहीं है (मैं ओपी से केवल कोड की नकल करता हूं, मैंने अब ठीक कर दिया :))

— मिधुन एमपी

@MichaelDeMutis: आप requiredविशेषता का उपयोग कर सकते हैं

— मिडहैन एमपी

ईमेल .comकिसी ईमेल में चेक नहीं करता है । यह केवल @ चिह्न की जाँच करता है। पूर्व। मैं example@gmailफॉर्म दर्ज कर सकता हूं और सेव कर सकता हूं । हालांकि यह एक मान्य ईमेल पता नहीं है। क्या ठीक से जाँच करने के लिए वर्कअराउंड है [e-mail]?

— रुचिका

@Liz। example@gmailएक मान्य ईमेल नहीं हो सकता है, लेकिन यह एक मान्य ईमेल पता प्रारूप है।

— पजाजा

Answer 2

Www.w3.org साइट का input type=emailपृष्ठ नोट करता है कि एक ईमेल पता किसी भी स्ट्रिंग है जो निम्नलिखित नियमित अभिव्यक्ति से मेल खाता है:

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

Regex पैटर्न से मेल खाने के लिए मान की आवश्यकता के लिए requiredविशेषता और विशेषता का उपयोग करें pattern।

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

Comments

आपको दो '/' और स्टार्ट '^' के बिना पैटर्न डालना होगा और '$' सिंबल खत्म करना होगा। जैसे[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*

— विक्टर

@ विक्टर क्षमा करें, लेकिन आप आंशिक रूप से गलत हैं। यह प्रतीक महत्वपूर्ण हैं उनके बिना पैटर्न स्ट्रिंग में हर जगह मेल खाना शुरू कर देगा और इसे बेकार बना देगा। जहाँ आप सही हैं, स्लैश को समाप्त कर रहे हैं।

— हेक्सोडस

@Victor आपके जवाब ने मेरे लिए काम किया। ओपी के रेगेक्स ने मुझे एक गलत सकारात्मक कहा कि यह एक वैध ईमेल पता होने पर भी फॉर्म की आवश्यकताओं से मेल खाता है। शायद यह है कि मैं नियमित रूप से HTML का उपयोग नहीं कर रहा हूं, लेकिन HTML फॉर्म को प्रस्तुत करने के लिए React JS का उपयोग कर रहा हूं।

— का मोक

मैंने लगभग इसे वोट दिया क्योंकि सही उत्तर का उपयोग DOMNode पर बूलियन संपत्ति का उपयोग type="email"और जांच validकरने के लिए है

— डोमिनिक

इस उल्लेख के लिए धन्यवाद।

— स्टीफन सिप्रियन हॉटोलानु

Answer 3

के लिए उपयोग कर [a-zA-Z0-9.-_]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,}रहा है [e-mail]/[e-mail]

Comments

यह regex ईमेल पतों पर कई अनुचित आवश्यकताओं को रखता है - उदाहरण के लिए, यह उन ईमेल पतों को अस्वीकार करता है जिनमें एक- या दो-अक्षर का उपयोगकर्ता नाम है, या जिन्हें एक-अक्षर डोमेन नाम पर होस्ट किया गया है।

— डस्कवफ-एक्टिव-

संपादित। शुक्रिया @duskwuff

— वैन गुयेन

अभी भी एक-अक्षर डोमेन नामों को अस्वीकार करता है।

— डस्कवफ-एक्टिव-

यह 1 अक्षर / संख्या डोमेन को अनुमति देता है: [a-zA-Z0-9।-_] {1,} @ [a-zA-Z0-9 .-]] {1,} [।] {1} [a-zA -Z0-9] {2,}

— रूडर

यह भी ध्यान दें कि, उदाहरण के लिए, postmaster@aiएक वैध ईमेल पता है और यह regexp उस पर भी प्रतिबंध लगाएगा। (स्रोत: serverfault.com/q/154991/104798 )

— मिक्को रेंटालिनेन

Answer 4

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

लगता है जब क्षेत्र या तो खाली है या वैध है। इसमें कुछ अन्य रोचक झंडे भी हैं:

क्रोम में परीक्षण किया गया।

Answer 5

यहाँ उदाहरण मैं अपने सभी फार्म ईमेल इनपुट के लिए उपयोग करता हूँ। यह उदाहरण ASP.NET है, लेकिन किसी पर भी लागू होता है:

<asp:TextBox runat="server" class="form-control" placeholder="Contact's email" 
    name="contact_email" ID="contact_email" title="Contact's email (format: [e-mail])" 
    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: [e-mail])" 
    pattern="[a-zA-Z0-9!#$%&amp;'*+\/=?^_`{|}~.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*">

Answer 6

मुझे पता है कि आप जावास्क्रिप्ट समाधान के बाद नहीं हैं, लेकिन कुछ चीजें हैं जैसे कि अनुकूलित सत्यापन संदेश है कि, मेरे अनुभव से, केवल जेएस का उपयोग करके किया जा सकता है।

इसके अलावा, 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('');
        }
    });
})

Comments

कृपया केवल लिंक उत्तर पोस्ट न करें। लिंक के आवश्यक भागों को अपने उत्तर में रखें

— Rizier123

Answer 7

पार्टी के लिए थोड़ा देर हो गई, लेकिन इस नियमित अभिव्यक्ति ने मुझे क्लाइंट साइड में ईमेल टाइप इनपुट को मान्य करने में मदद की। हालाँकि, हमें हमेशा सर्वर साइड में भी सत्यापन करना चाहिए।

<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})(\]?)$">

आप यहाँ सभी प्रकार के और अधिक रेगीक्स पा सकते हैं ।

Answer 8

TL; DR: केवल 100% सही तरीका है कि -sign की जांच के लिए दर्ज किए गए ईमेल पते में कहीं और देखें और फिर दिए गए ईमेल पते पर एक सत्यापन संदेश पोस्ट करें। यदि वे ईमेल संदेश में सत्यापन के निर्देशों का पालन कर सकते हैं , तो इनपुट ईमेल पता सही है।

लंबा जवाब:

डेविड गिल्बर्टसन ने इस साल के बारे में लिखा :

दो प्रश्न पूछने की जरूरत है:

1. क्या उपयोगकर्ता यह समझते हैं कि उन्हें इस क्षेत्र में एक ईमेल पता लिखना चाहिए था ?
2. क्या उपयोगकर्ता ने इस क्षेत्र में अपना ईमेल पता सही प्रकार से लिखा है?

यदि आपके पास "ईमेल" कहे जाने वाले लेबल के साथ एक अच्छी तरह से रखी गई फॉर्म है, और उपयोगकर्ता कहीं '@' प्रतीक में प्रवेश करता है, तो यह कहना सुरक्षित है कि वे समझ गए थे कि वे एक ईमेल पते में प्रवेश करने वाले थे। आसान।

अगला, हम यह पता लगाने के लिए कुछ सत्यापन करना चाहते हैं कि क्या उन्होंने अपने ईमेल पते को सही ढंग से दर्ज किया है।

संभव नहीं।

[...]

कोई भी गलत अनुमान निश्चित रूप से गलत ईमेल पते पर परिणाम देगा , लेकिन शायद केवल एक अमान्य ईमेल पते के परिणामस्वरूप होगा ।

[...]

अगर कोई ईमेल पता 'वैध' है, तो काम करने का कोई मतलब नहीं है। एक उपयोगकर्ता एक गलत और वैध ईमेल पते दर्ज करने की अधिक संभावना है, क्योंकि वे एक अमान्य एक दर्ज करने के लिए हैं ।

दूसरे शब्दों में, यह ध्यान रखना महत्वपूर्ण है कि किसी भी प्रकार का स्ट्रिंग आधारित सत्यापन केवल तभी जांच सकता है जब वाक्यविन्यास अमान्य हो। यह जाँच नहीं कर सकता है कि क्या उपयोगकर्ता वास्तव में ईमेल देख सकता है (जैसे कि उपयोगकर्ता पहले ही क्रेडेंशियल खो चुका है, किसी अन्य व्यक्ति का टाइप किया हुआ पता या किसी दिए गए उपयोग के मामले के लिए व्यक्तिगत ईमेल पते के बजाय टाइप किया गया ईमेल)। प्रश्न के बाद आप वास्तव में "के बाद क्या यह ईमेल वाक्यविन्यास है " के बजाय " क्या मैं दिए गए ईमेल पते का उपयोग कर उपयोगकर्ता से संवाद कर सकता हूं "? यदि आप "इसे शामिल करता है" से अधिक स्ट्रिंग को मान्य करते हैं @, तो आप पूर्व प्रश्न का उत्तर देने का प्रयास कर रहे हैं! निजी तौर पर, मैं हमेशा से हूं केवल बाद वाले प्रश्न के बारे में दिलचस्पी लेता ।

इसके अलावा, कुछ ईमेल पते जो वाक्य-रचना या राजनीतिक रूप से अमान्य हो सकते हैं, काम करते हैं। उदाहरण के लिए, postmaster@aiतकनीकी रूप से काम करता है भले ही टीएलडी में एमएक्स रिकॉर्ड नहीं होना चाहिए । WHATWG मेलिंग सूची (जहां HTML5 को पहली जगह में डिज़ाइन किया गया है) पर ईमेल सत्यापन के बारे में चर्चा देखें ।

Answer 9

HTML 5 का उपयोग करते हुए, बस इनपुट ईमेल बनाएं जैसे:

<input type="email"/>

जब उपयोगकर्ता इनपुट बॉक्स पर होवर करता है, तो वे टूलटिप को एक वैध ईमेल दर्ज करने का निर्देश देंगे। हालांकि, बूटस्ट्रैप रूपों में उपयोगकर्ता को ईमेल पता दर्ज करने के लिए एक बेहतर टूलटिप संदेश है और यह उस क्षण को पॉप अप करता है जब दर्ज किया गया मान वैध ईमेल से मेल नहीं खाता है।

Comments

लेकिन, यह "abc @ gmail" जैसे मामलों को अमान्य नहीं करता है।

— nbsamar

हाँ, मुझे लगता है कि, मैं वैधता चाहूँगा यदि उपयोगकर्ता उदाहरण के लिए gmail या हॉटमेल डालते हैं यदि मेरा उपयोगकर्ता अन्य डालता है तो न ही उन्हें मेरे लॉगिन के साथ जारी रखें, क्या आप जानते हैं कि मैं ऐसा कैसे कर सकता हूँ?

— सिमोन

Answer 10

आप इस पैटर्न का भी पालन कर सकते हैं

<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 में

Comments

<input type="email" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" title="please enter valid email [[e-mail]].">आप वैधता संदेश दिखाने के लिए शीर्षक भी जोड़ सकते हैं।

— imdzeeshan

Answer 11

एमडीएन के अनुसार , यह 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])?)*$/

Answer 12

HTML5 विशेषता "पैटर्न" का उपयोग करके ईमेल को सही ढंग से मान्य करना बहुत मुश्किल है। यदि आप "पैटर्न" का उपयोग नहीं करते हैं तो किसी को @ संसाधित किया जाएगा। जो मान्य ईमेल नहीं है।

उपयोग pattern="[a-zA-Z]{3,}@[a-zA-Z]{3,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}"करने के लिए प्रारूप की आवश्यकता होगी, [e-mail]लेकिन अगर प्रेषक के पास एक प्रारूप है [e-mail](या समान) तो इसे ठीक करने के लिए मान्य नहीं किया जाएगा जिसे आप डाल सकते हैं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 या एक जैसे।

हालाँकि, इसका उपयोग करने पर, यह validate करने के लिए किसी को भी@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 पैटर्न विशेषता का उपयोग करके ईमेल पते के दोनों या सभी संस्करणों को कैसे मान्य किया जाए।

Comments

रेगेक्स चेक का इस्तेमाल कभी भी किसी भी परिस्थिति में नहीं किया जाना चाहिए। बहुत सारे पैटर्न हैं और उनकी बहुत सारी खामियां हैं। उदाहरण के लिए, जब किसी व्यक्ति को वास्तव में, यह 100% मान्य होता है, तो उसे कई rexx जांचों के लिए अमान्य माना जाता है। रेगेक्स मेरा और कई अन्य उपयोगकर्ताओं के पक्ष में एक कांटा है और इसे जाना है। उपयोगकर्ता को सुनिश्चित करने के लिए एक वैकल्पिक विधि एक वैध ईमेल पता दर्ज करने की आवश्यकता है जिसका उपयोग किया जाना चाहिए।

— साउंडफैक्सो

यह भी ध्यान दें कि, उदाहरण के लिए, postmaster@aiएक वैध ईमेल पता है और यह regexp उस पर भी प्रतिबंध लगाएगा। (स्रोत: serverfault.com/q/154991/104798 )

— मिकको रेंटालिनेन

HTML5 के साथ DeBounce जैसे ईमेल सत्यापन उपकरण की भी सिफारिश की गई है।

— इमान हज्जाज़ी