如何让 Javascript 识别电子邮件地址？

Question

I am trying to give a textfield a dual function. So, if you type, say, 12345, into it, it finds the relevant data. But if you type an email-address, or essentially anything with an XXX@XXX.XXX format, I want the password-field and button to appear. I've been trying to use regex, but for some reason it does not work, and everything is recognised as an email, so even 12345 opens the login-things. Can you help me? I've tried getting the gist into the snippets.

 function imgMain() { var iDCode = document.getElementById("IDQuery").value; var mail = /^[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])?)*$/; if (iDCode = mail) { console.log("this is a mail"); document.getElementById("passwordDiv").style.display = "block"; document.getElementById("loginbuttonDiv").style.display = "block"; document.getElementById("SeeSlide").style.display = "none"; } else { console.log("this is not a mail") } }

 <div id="QueryField"> <input type="text" id="IDQuery" placeholder="ID Kode"> <div style="display: none" id=passwordDiv><input type="password" id="passwordfield"><br></div> <div style="display: none" id=loginbuttonDiv><button id="login" onclick="login()">log ind</button><br></div> <button id="SeeSlide" onclick="imgMain()">Se Slide</button><br> <br><br><br><br> </div>

Answer 1

user mail.test() with proper regex like so

let mail = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if(mail.test(iDCode)){
      alert("Valid email is required")
    }

Answer 2

You can try this version, it's based on thew3resource .

 function imgMain() { var iDCode = document.getElementById("IDQuery").value; var mailformat = /^\\w+([\\.-]?\\w+)*@\\w+([\\.-]?\\w+)*(\\.\\w{2,3})+$/; if (iDCode.match(mailformat)) { console.log("this is a mail"); document.getElementById("passwordDiv").style.display = "block"; document.getElementById("loginbuttonDiv").style.display = "block"; document.getElementById("SeeSlide").style.display = "none"; } else { console.log("this is not a mail") } }

 <div id="QueryField"> <input type="text" id="IDQuery" placeholder="ID Kode"> <div style="display: none" id=passwordDiv><input type="password" id="passwordfield"><br></div> <div style="display: none" id=loginbuttonDiv><button id="login" onclick="login()">log ind</button><br></div> <button id="SeeSlide" onclick="imgMain()">Se Slide</button><br> <br><br><br><br> </div>

Answer 3

You can try using the .validate function. It works really great for checking login forms. The function could look like the following:

$("#IDQuery").validate({
    rules: {
        email:
            {required: true, email: true},
        password:
            {required: true}
        },
    messages: {
        email:
        {required: 'Please enter a E-mail',
        email: 'Please enter a valid E-mail'},
        password:{required: 'Please enter a password'}
    },
    errorPlacement: function (error, element) {
        error.insertAfter(element.parent());
    }
});

Answer 4

In your if statement you have if (iDCode = mail) .

This re-assigns the value of mail to the variable iDCode . So the if effectively becomes if(mail) which is always true, because RegEx objects are truthy.

You should instead be checking if the input matches the regex, using either mail.test(iDCode) or iDCode.match(mail)

Answer 5

Few different ways. You can send an email to that address and check whether it bounces back or you can use PHP (I doubt you want to do this since your question is JavaScript) and send an email and then have them confirm it on the web address. Honestly, PHP is the best way to do this but since you're using JS you can try this fromhttps://www.w3resource.com/javascript/form/email-validation.php :

function ValidateEmail(mail) {
 if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(myForm.emailAddr.value)) {
    return (true)
 }
 alert("You have entered an invalid email address!")
 return (false)
}

This works because we are checking all the invalid characters that are in an email address. If the input field contains any of those characters, its invalid.

Try Googling the answer. There are lots of information: https://www.google.com/search?rlz=1C1GCEB_enUS865US865&ei=bn9dXuefDanJ0PEPofOHyAg&q=javacsript+check+email+address&oq=javacsript+check+email+address&gs_l=psy-ab.3..0i71l8.2549.3358..3533...0.2..0.0.0.......12....1..gws-wiz.........23%3A11-12j24%3A11-2.1hEMZpGGmWs&ved=0ahUKEwjnjr7N4vznAhWpJDQIHaH5AYkQ4dUDCAw&uact=5&safe=active&ssui=on