Question

我试图编写一些验证用户输入的javascript。确保提交的内容是电子邮件。但我无法弄清楚这一点。我尝试过正则表达式，但它们并没有为我工作。这是我的代码的链接 https://codepen.io/alexRamirezBlonski/pen/rpGyKd

以下是我的javascript

//targeting the red buttons (showing sign up form)
var btn2 = document.getElementById("btn2");
var btn1 = document.getElementById("btn1");
//disable buttons after a click
//btn2.removeEventListener("click", showDiv);
//btn1.removeEventListener("click", showDiv);

//what happens during the event of being clicked
btn2.addEventListener("click", showDiv);
btn1.addEventListener("click", showDiv);
//creating function for what happens when you are clicked
function showDiv() {
  document.getElementById("welcomeDiv").style.display = "block";
}
//onclick the input text clears for users
function clearDefault(a){
  if(a.defaultValue==a.value){
    a.value=""
  }
}
//this is the end of the form apeering

//targeting the submit buttons
var submit = document.getElementById("submit");
//what happens during the event of being clicked
submit.addEventListener("click", showMsg);
//creating function for what happens when you are clicked
function showMsg() {
    document.getElementById("welcomeDiv").style.display = "none";
    document.getElementById("msg").style.display = "block";
    btn2.removeEventListener("click", showDiv);
    btn1.removeEventListener("click", showDiv);
}
/*function showMsg() {
  if (document.getElementById('welcomeDiv').value == ""){
    alert('Put something in!');
    document.getElementById('fname').style.borderColor ="red";
    return false;
  } else{
    document.getElementById("welcomeDiv").style.display = "none";
    document.getElementById("msg").style.display = "block";
  }
}*/
//disable double click event
/*function disableClick(){
 if(document.getElementById("msg").style.display == "block"){
alert('hey')
  }
}
disableClick();*/
//prevent form pressing enter below
function checkEnter(e) {
  e = e || event;
  var txtArea = /textarea/i.test((e.target || e.srcElement).tagName);
  return txtArea || (e.keyCode || e.which || e.charCode || 0) !== 13;
}
document.querySelector('form').onkeypress = checkEnter;

Answer 1

以下主题已经回答了这个问题：

How can you validate an email address in JavaScript?

如果这没有用，请告诉我们，我们可以更贴近您的情景。

Answer 2

您可以将其用于电子邮件验证。

它匹配验证表达式

＆＃13;

function ValidateEmail(){
  var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;  
  var email = document.getElementById('email').value;
  if(email.match(mailformat))  {  
    alert("valid");
  }else{  
    alert("invalid");  
  }
}

＆＃13;

<input type="text" id="email" placeholder="email id">
<input type="button" value="check" onclick="ValidateEmail()"/>

＆＃13;

Answer 3

我总是使用相同的正则表达式，它让我的生活更轻松！有了它，您真正需要的是检查值是否与当前正则表达式匹配：regex.test(el.value)。以下是完整的示例：

＆＃13;

var regex = /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
var el = document.getElementById("input");

function validateEmail() {
  var isValid = regex.test(el.value) && el.value !== "";
  alert("Is valid: " + isValid)
}

＆＃13;

<input id="input">
<button onclick="validateEmail()">Validate</button>

＆＃13;

如何验证电子邮件，用户输入，使用javascript（而不是jquery）

3 个答案: