javascript - 第二次单击按钮时验证不起作用

Question

我正在将用户名和电子邮件添加到用户列表中，并在添加时验证电子邮件。页面第一次加载时验证正在工作，如果我尝试第二次输入无效的电子邮件并单击添加按钮，则它不起作用。

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

<script type="text/javascript">
function addUser(){
    var list = document.getElementById('users');
    var username =document.getElementById('username').value;
    var email = document.getElementById('email');
    var entry = document.createElement('li');
    if (email.value != '') 
    {
        reg = /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/;
        if (reg.test(email.value) == true) {
            entry.appendChild(document.createTextNode(username + ' ' + email.value));
            list.appendChild(entry);
            return false;
        }
        else {
            email.className += 'errorclass';
            return false;                             
        }
    }
    else{
        alert("Please Enter Email Id");
        return false;
    }
}
</script>
<style>
.errorclass{
    border:1px red solid;
}
</style>

Answer 1

每次出现验证错误时，您都将“errorclass”添加到电子邮件类中。所以第二次是“errorclasserrorclass”，没有在css中定义。

用途:

email.setAttribute('class','errorclass')