在添加到列表中时验证表单中的电子邮件字段 [英] Validate email field in the form while adding to the list

问题描述

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

I am adding users to the list using pure js and I am trying to validate the email field using ajax. How to validate the email field before submitting the form? If the email field is valid then i want to submit or else I have show the error in valid email.

这是代码

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

推荐答案

尝试一下

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

这篇关于在添加到列表中时验证表单中的电子邮件字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！