使用js添加电子邮件验证和字符限制

Question

所以我是编码 java 脚本的新手，实际学习并遇到了这个东西验证。在表单验证期间，我能够验证名称、主题和消息，但不明白如何验证电子邮件。尝试这样做并学习但没有很好地锻炼。此外，如果有任何方法可以在消息框中设置最小字数限制而不是最小字符数限制，请也提供帮助。提前致谢

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

这是我在互联网上找到的正则表达式：

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

注意事项：我将电子邮件的输入类型更改为文本以测试验证

Answer 2

我为电子邮件做了，您可以通过学习正则表达式来为其余部分做：REGEX tutorial

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;
  }
}

my Fiddle

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

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

使用js添加电子邮件验证和字符限制

add E-mail validation and character limit using js

javascript

html

forms

validation

email-validation

这就是我在 React js 中的做法