使用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');
    }
}

具体来说，试试上面代码的正则表达式部分。 希望它有帮助。