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

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

这是代码

 
Add a User:
   add user 
 
UsersList:
 
 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

  
 
Add a User:
   add user 
 
UsersList:
 
 

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; } 

在这里演示

Answer 3

试试这将validation该字段，然后将信息添加到列表中

 
 
Add a User:
   add user 
 
UsersList:
 
 

DEMO

Answer 4

对于简单validation，请使用以下方法(type="email")

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

对于深度使用此：

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

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; } 

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