时间戳

首页 > 解决方案 > 如何使用 JavaScript 使用户输入匹配以进行表单验证

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

问题描述

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

如何使用 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>

标签： htmlformsvalidationyoutube-api

解决方案

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

首先，像这样向电子邮件输入字段添加一个 'id' 属性（以便我们稍后可以将表单链接到 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'属性添加到标签中（如果检查电子邮件的函数返回false，则不会发送表单）：

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

我希望这对你有用:)

推荐阅读