我想用 Javascript 對我的聯系表格進行簡單的驗證

Question

您好親愛的開發人員，

我有一個簡單的聯系表格，其中包含 HTML 和 CSS，我想用 Javascript（和 Localstorage）對名稱、Javascript（和 Localstorage）進行簡單的驗證，以及評論部分。 Hier 是我的代碼，但 JS 不起作用。 我已經驗證 function 的名稱和 email 但它們不起作用。

你能幫助我嗎？

HTML：

            <input type="text" id="name_key" class="input-kontakt" name="name" tabindex="1" placeholder="Name:*" required>

            <input type="email" id="mail_key" class="input-kontakt" name="email" tabindex="2" placeholder="Email:*" required>

            <textarea name="massage" id="message_key" class="input-kontakt" tabindex="3" maxlength="200" placeholder="Nachricht:*" required></textarea>
            
            <div class="error"></div>
            <br>
            
            <button id="button_key" class="button" type="submit" tabindex="4">Senden</button>

    </form>

Java 腳本：

const name_key = document.getElementById("name_key");
const mail_key = document.getElementById("mail_key");
const message_key = document.getElementById("message_key");
const button_key = document.getElementById("button_key");

function validMail (mail_key) {
    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(mail_key);
}

function validateName() {
    if (name_key === null) {
      error.innerHTML = 'Name kann nicht leer sein';
      return false;
    } else if (name_key < characters.length < 3) {
      error.innerHTML = 'Name muss mehr als 3 karakter sein';
      return false;
    }
  }
  
function validateEmail() {
    if (mail_key === null) {
        error.innerHTML = 'Email kann nicht leer sein';
        return false;
    } else if (mail_key < characters.length < 5) {
        error.innerHTML = 'Email muss mehr als 3 karakter sein';
        return false;
    }else if (validMail() = false){
        error.innerHTML = 'Bitte nutzen Sie richtige Email-Format';
        return false;
    }
  }


button_key.onclick = function () {
    const name = name_key.value;
    const mail = mail_key.value;
    const message = message_key.value;

    
        if (name && mail && message) 
        {
            localStorage.setItem("name_key", name);
            localStorage.setItem("mail_key", mail);
            localStorage.setItem("message_key", message);
            localStorage.setItem("kontaktaufnahme", name + " ;" + mail  + " ;" + message);
            window.confirm("Wir melden uns!");
        }    
        else{ 
            window.confirm("Leider fehlen Angaben!");
        }

};  

Answer 1

缺少兩件事：

1. validateName和validateEmail函數永遠不會被調用。 因此，他們的結果永遠無法讀取。
2. validateName和validateEmail函數不檢查輸入的實際value ，而是檢查輸入本身。

確保您允許 function 允許將值傳遞給這些函數。 試着把它想象成把一個詞（值）交給你的朋友（函數），如果這個詞好與不好（你的結果），他會給你答案。

同樣在 JavaScript 中，可以通過讀取該字符串的length屬性來檢查字符串的長度。 然后將該長度與一個數字進行比較。

const name_key = document.getElementById("name_key");
const mail_key = document.getElementById("mail_key");
const message_key = document.getElementById("message_key");
const button_key = document.getElementById("button_key");

function validateName(value) {
  if (value === '') {
    error.innerHTML = 'Name kann nicht leer sein';
    return false;
  } else if (value.length < 3) {
    error.innerHTML = 'Name muss mehr als 3 karakter sein';
    return false;
  } else {
    return true;
  }
}

function validMail(value) {
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
}

function validateEmail(value) {
  if (value === '') {
    error.innerHTML = 'Email kann nicht leer sein';
    return false;
  } else if (value.length < 5) {
    error.innerHTML = 'Email muss mehr als 3 karakter sein';
    return false;
  } else if (validMail(value)) {
    error.innerHTML = 'Bitte nutzen Sie richtige Email-Format';
    return false;
  }
  return true;
}
  
button_key.onclick = function () {
  const name = name_key.value;
  const mail = mail_key.value;
  const message = message_key.value;

  const isValidName = validateName(name);
  const isValidEmail = validateEmail(mail);

  if (isValidName && isValidEmail) {
    // Name and email are valid.
  }
};

Answer 2

const name_key = document.getElementById("name_key");
const mail_key = document.getElementById("mail_key");
const message_key = document.getElementById("message_key");
const button_key = document.getElementById("button_key");


function validMail (email) {
    const pattern = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return pattern.test(email);
}

function validateName(name) {
    if (name == "") {
      error.innerHTML = 'Name kann nicht leer sein';
      return false;
    } else if (name.length < 3) {
      error.innerHTML = 'Name muss mehr als 3 karakter sein';
      return false;
    }
        return true;
    }

  



function validateEmail(email) {
    if (email == "") {
        error.innerHTML = 'Email kann nicht leer sein';
        return false;
    } else if (email.length < 4) {
        error.innerHTML = 'Email muss mehr als 4 karakter sein';
        return false;
    }else if (!validMail(email)){
        error.innerHTML = 'Bitte nutzen Sie richtige Email-Format';
        return false;
    }
        return true;
    }


function validateMsg(message) {
    if (message == "") {
        error.innerHTML = 'Bitte schreiben Sie Ihren Nachricht.';
        return false;
    }
        return true;
    }
    



button_key.onclick = function () {
    const name = name_key.value;
    const email = mail_key.value;
    const message = message_key.value;


            if ( validateName(name) && validateEmail(email) && validateMsg(message) ){
                localStorage.setItem("name_key", name);
                localStorage.setItem("mail_key", email);
                localStorage.setItem("message_key", message);
                localStorage.setItem("kontaktaufnahme", name + " ;" + email  + " ;" + message);
                window.confirm("Wir melden uns!");
            }
        
        
        };