如何使用 JavaScript 使用户输入匹配以进行表单验证

Question

我见过类似的问题，但他们的提问方式与我想问的方式不同。

如何使用 javascript 确保用户提供的电子邮件与我希望他们在用户点击提交按钮后提交表单之前提供的电子邮件相匹配。

阐述：

正确的电子邮件地址是 badmansmo@gmail.com.

我的表单输入占位符显示 b.......o@.....com 作为提示。

如果用户输入任何与 badmansmo@gmail.com 不匹配的电子邮件我希望他们收到错误消息并且不应提交表单。

如何使用 javascript 执行此操作？

请参阅下面的代码。

   <form action='' method='POST' enctype="multipart/form-data">
    <div class='item'>
          
          <p><b><span style="color: red;">Email Address</span></b><span class='required'>*</span></p>
         
            <input type="email" name="email" placeholder="ba******o@***.com" required=''/>
           
       </div>
<div class='question'>
          <center><p>Privacy Policy<span class='required'>*</span></p></center>
          <div class='question-answer checkbox-item'>
            <div>
              
              <center><label class='check' for='check_1'><span>By submitting this form you agree to the terms of service <a href='https://www.google.com/p/privacy-policy.html' target="_blank">privacy policy.</a></span></label></center>
            </div>
          </div>
        </div>
        <div class='btn-block'>
         <center> <button href='/' type='submit' id="submitForm">Submit</button></center>
      
      </div></form>

Answer 1

如果我是对的，您需要添加和更改一些内容才能正常工作。

首先，像这样向电子邮件输入字段添加一个 'id' 属性（这样我们可以 link 稍后将表单添加到 javascript 代码中）：

input type="email" name="email" placeholder="ba******o@***.com" required='' id="email"/>

然后，在页面的开头添加以下脚本（在和标签之间）。此脚本比较输入的电子邮件，如果不匹配则显示一条消息。

<script type="text/javascript">
function check_email()
{
    var email = document.getElementById("email").value;
    
    if(email.localeCompare("badmansmo@gmail.com")) {
        alert("ERROR. Email does not match.");
        return false;
    }
    return true;
}

最后，像这样将'onsubmit'属性添加到标签中（如果检查电子邮件的功能returns false，则不会发送表单）：

<form action='' method='POST' enctype="multipart/form-data" onsubmit="return check_email();">

我希望这对你有用:)

如何使用 JavaScript 使用户输入匹配以进行表单验证

How To Make User Input Match Using JavaScript for Form Validation

html

forms

validation

youtube-api