使用js添加電子郵件驗證和字符限制

Question

所以我是編碼 java 腳本的新手，實際學習並遇到了這個東西驗證。 在表單驗證期間，我能夠驗證名稱、主題和消息，但不明白如何驗證 email。 嘗試這樣做並學習，但沒有很好地鍛煉。 此外，如果有任何方法可以在消息框中設置最小字數限制而不是最小字符數限制，請也提供幫助。 提前致謝

 const name = document.getElementById("fname"); const message = document.getElementById("message"); const sub = document.getElementById("subject") function validate() { var isError = false; var errMessage = ''; if (name.value === "" || name.value == null) { isError = true; errMessage += "Please Enter Your Name\n"; } if (sub.value === "" || sub.value == null) { isError = true; errMessage += "Please Enter a Subject\n"; } if (message.value < 40) { isError = true; errMessage += "Your Message Should be Longer"; } if (isError) { alert(errMessage); return false; } else { return true; } }

 .contact-col { flex-basis: 48%; margin-bottom: 30px; }.contact-col div { display: flex; align-items: center; margin-bottom: 40px; }.contact-col div.fa { font-size: 28px; color: #f7a335; margin: 10px; margin-right: 30px; }.contact-col div p { padding: 0; }.contact-col div h5 { font-size: 20px; margin-bottom: 5px; color: #555; font-weight: 400; }.contact-col input, .contact-col textarea { width: 100%; padding: 15px; margin-bottom: 17px; outline: none; border: 1px solid #ccc; box-sizing: border-box; }.red-btn { display: inline-block; text-decoration: none; color: #f7a335; border: 1px solid #f7a335; padding: 12px 34px; font-size: 13px; background: transparent; position: relative; cursor: pointer; }.red-btn:hover { color: #fff; border: solid#f7a335; background: #f7a335; transition: 1s; }

 <div class="contact-col"> <form onsubmit="return validate()"> <input type="text" placeholder="Enter Your Name" id="fname"> <input type="email" placeholder="Enter E-mail ID"> <input type="text" placeholder="Enter Your Subject" id="subject"> <textarea rows="8" placeholder="Message" id="message"></textarea> <button type="submit" class="red-btn">Send Message</button> </form> </div>

Answer 1

嗨，我為您找到了幫助。

您可以使用 RegExp 進行匹配。

這是我自己的正則表達式：

/.*\@.*\.\w{2,3}/g

這是我在互聯網上找到的 RegExp：

/^(([^<>()[\]\\.,;:\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,}))$/

這是您要測試的代碼：

 const name = document.getElementById("fname"); const message = document.getElementById("message"); const sub = document.getElementById("subject"); const email = document.getElementById("email") function validate() { var isError = false; var errMessage = ''; if (name.value === "" || name.value == null) { isError = true; errMessage += "Please Enter Your Name\n"; } if (sub.value === "" || sub.value == null) { isError = true; errMessage += "Please Enter a Subject\n"; } if (message.value < 40) { isError = true; errMessage += "Your Message Should be Longer\n"; } console.log(email.value.match(/.*\@.*\.\w{2,3}/g)) if (email.value === "" || email.value.match(/.*\@.*\.\w{2,3}/g) === null){ isError = true; errMessage += "Please Enter a Valid Email"; } if (isError) { alert(errMessage); return false; } else { return true; } }

 .contact-col { flex-basis: 48%; margin-bottom: 30px; }.contact-col div { display: flex; align-items: center; margin-bottom: 40px; }.contact-col div.fa { font-size: 28px; color: #f7a335; margin: 10px; margin-right: 30px; }.contact-col div p { padding: 0; }.contact-col div h5 { font-size: 20px; margin-bottom: 5px; color: #555; font-weight: 400; }.contact-col input, .contact-col textarea { width: 100%; padding: 15px; margin-bottom: 17px; outline: none; border: 1px solid #ccc; box-sizing: border-box; }.red-btn { display: inline-block; text-decoration: none; color: #f7a335; border: 1px solid #f7a335; padding: 12px 34px; font-size: 13px; background: transparent; position: relative; cursor: pointer; }.red-btn:hover { color: #fff; border: solid#f7a335; background: #f7a335; transition: 1s; }

 <div class="contact-col"> <form onsubmit="return validate()"> <input type="text" placeholder="Enter Your Name" id="fname"> <input type="text" placeholder="Enter E-mail ID" id="email"> <input type="text" placeholder="Enter Your Subject" id="subject"> <textarea rows="8" placeholder="Message" id="message"></textarea> <button type="submit" class="red-btn">Send Message</button> </form> </div>

注意：我將 email 的輸入類型更改為文本以測試驗證

Answer 2

我為 email 做過，你可以通過學習正則表達式為 rest 做這個：正則表達式教程

HTML

<div class="contact-col">
  <form name="form1" action="#">
    <input type='text' name='text1' />
    <input type="submit" name="submit" value="Submit" onclick="ValidateEmail(document.form1.text1)" />
  </form>
</div>

CSS

.contact-col {
  flex-basis: 48%;
  margin-bottom: 30px;
}

.contact-col div {
  display: flex;
  align-items: center;
  margin-bottom: 40px;
}

.contact-col div .fa {
  font-size: 28px;
  color: #f7a335;
  margin: 10px;
  margin-right: 30px;
}

.contact-col div p {
  padding: 0;
}

.contact-col div h5 {
  font-size: 20px;
  margin-bottom: 5px;
  color: #555;
  font-weight: 400;
}

.contact-col input,
.contact-col textarea {
  width: 100%;
  padding: 15px;
  margin-bottom: 17px;
  outline: none;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

.red-btn {
  display: inline-block;
  text-decoration: none;
  color: #f7a335;
  border: 1px solid #f7a335;
  padding: 12px 34px;
  font-size: 13px;
  background: transparent;
  position: relative;
  cursor: pointer;
}

.red-btn:hover {
  color: #fff;
  border: solid#f7a335;
  background: #f7a335;
  transition: 1s;
}

JS

function ValidateEmail(inputText) {
  var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
  if (inputText.value.match(mailformat)) {
    alert("Valid email address!");
    document.form1.text1.focus();
    return true;
  } else {
    alert("You have entered an invalid email address!");
    document.form1.text1.focus();
    return false;
  }
}

我的小提琴

Answer 3

這就是我在 React js 中的做法

const validateForm = () => {
    let errorFlag = false;
            
    const atposition = email.trim().indexOf('@');
    const dotposition = email.trim().lastIndexOf('.');
    if(atposition < 1 || dotposition < atposition + 2 || dotposition + 2 >= email.trim().length) {
        setemailError('Please enter a valid email Id');
        errorFlag = true;
    }

    if (errorFlag) {
        throw new Error('Form validation failed');
    }
}

具體來說，試試上面代碼的正則表達式部分。 希望它有幫助。