我想用 Javascript 对我的联系表进行简单验证

Question

亲爱的开发者，您好，

我有一个带有 HTML 和 CSS 的简单联系表单，我想使用 Java 脚本（和 Localstorage）对名称、电子邮件和评论部分进行简单验证。 Hier 是我的代码，但 JS 不起作用。我有姓名和电子邮件的验证功能，但它们不起作用。

你能帮帮我吗？

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

缺少两件事：

永远不会调用 validateName 和 validateEmail 函数。因此，他们的结果永远无法读取。
validateName 和 validateEmail 函数不检查输入的实际 value，而是检查输入本身。

确保您允许这两个函数允许将值传递给这些函数。试着把它想象成把一个词（值）交给你的朋友（函数），如果这个词好不好（你的结果）谁会 return 你的答案。

此外，在 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!");
            }
        
        
        };

我想用 Javascript 对我的联系表进行简单验证

i want a simple validation with Javascript for my Contact form

html

javascript

local-storage