在第二次單擊按鈕時驗證不起作用

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”添加到電子郵件類別。 因此第二次是在CSS中未定義的“ errorclasserrorclass”。

采用：

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