在添加到列表时验证表单中的电子邮件字段

Question

我正在使用纯 js 将用户添加到列表中，并且正在尝试使用 ajax 验证电子邮件字段。如何在提交表单之前验证电子邮件字段？如果电子邮件字段有效，那么我想提交，否则我在有效电子邮件中显示错误。

这里是代码

<form id="myform">
 <h2>Add a User:</h2>
 <input id="username" type="text" name="username" placeholder="name">
 <input id="email" type="text" name="email" placeholder="email">
 <button onclick='return addUser();' type="submit">add user</button>
</form>


<h2>UsersList:</h2>
<ul id="users"></ul>

function addUser(){
  var list = document.getElementById('users');
  var username =document.getElementById('username').value;
  var email = document.getElementById('email').value;
  var entry = document.createElement('li');
  entry.appendChild(document.createTextNode(username + ' ' + email));
  list.appendChild(entry);
  return false;
}

Answer 1

if you using js then below code will definitely help you.

        if (document.getElementById('email').value != '') 
        {
            reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
           if (reg.test(document.getElementById('email').value) == true) {

                                        }
        else {
                                            alert("Please Enter Valid Email Id");
                                            return false;
                                        }

        }
    else{
    alert("Please Enter Email Id");
                                            return false;

    }

edited code: u have to just replaced it with your code, hope will work for you:

function addUser(){
var list = document.getElementById('users');
var username =document.getElementById('username').value;
var email = document.getElementById('email').value;
var entry = document.createElement('li');
if (email.value != '') 
        {
            reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
           if (reg.test(email.value) == true) {
        entry.appendChild(document.createTextNode(username + ' ' + email));
list.appendChild(entry);
return false;
                                        }
        else {
                                            alert("Please Enter Valid Email Id");
                                            return false;
                                        }

        }
    else{
    alert("Please Enter Email Id");
                                            return false;

    }

}

Answer 2

试试这个

HTML

 <form id="myform">
    <h2>Add a User:</h2>
    <input id="username" type="text" name="username" placeholder="name">
    <input id="email" type="email" name="email" placeholder="email">
     <button onclick='return addUser();' type="submit">add user</button>
    </form>


    <h2>UsersList:</h2>
    <ul id="users"></ul>

JS

function addUser(){
    var list = document.getElementById('users');
var username =document.getElementById('username').value;
var email = document.getElementById('email').value;
var entry = document.createElement('li');
    var emailPat = /^(\".*\"|[A-Za-z]\w*)@(\[\d{1,3}(\.\d{1,3}){3}]|[A-Za-z]\w*(\.[A-Za-z]\w*)+)$/
    var EmailmatchArray = email.match(emailPat);
   if (EmailmatchArray == null) {
       email.focus();   }
    else {
        entry.appendChild(document.createTextNode(username + ' ' + email));
         list.appendChild(entry);
    }
     return false;
}

DEMO HERE

Answer 3

试试这个 它将验证该字段，然后将信息添加到列表中

<form id="myform" onsubmit="return addUser();">
 <h2>Add a User:</h2>
 <input id="username" type="text" required name="username" placeholder="name">
 <input id="email" type="email" required name="email" placeholder="email">
 <button type="submit">add user</button>
</form>


<h2>UsersList:</h2>
<ul id="users"></ul>

DEMO

Answer 4

对于简单的验证，请使用以下方式(type="email")

 <input id="email" type="email" name="email" placeholder="email">

这是 w3schools 链接http://www.w3schools.com/js/tryit.asp?filename=tryjs_form_validate_email

对于深度使用这个：

 <form name="myForm" action="demo_form.asp" onsubmit="return validateForm();" method="post">

//Your Code here

 function validateForm()
{
var x=document.forms["myForm"]["email"].value;
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
  {
  alert("Not a valid e-mail address");
  return false;
  }
}
</form>

Answer 5

试试这个

function addUser() {
      var email = document.getElementById('email').value;
      var username =document.getElementById('username').value;
      $.post('/url/to/validation/email/from/db', { "email": email, "username": username }, function(data) {
              if(data && data.Success){
                  var entry = document.createElement('li');
                  entry.appendChild(document.createTextNode(username + ' ' + email));
                  document.getElementById('users').appendChild(entry);
              }else{
                    alert('Email already exists!');
              }
      },'json');
      return false;
}

这将根据服务器验证输入的电子邮件，然后添加到列表中。