javascript - 通过重新输入来验证电子邮件？

Question

我需要一个电子邮件地址来验证，方法是让用户将其重新输入到使用 Google 的 Recaptcha 的表单中。我为此使用了以下代码，但它不起作用。我没有收到一条消息，指出填写的电子邮件地址彼此不匹配。当电子邮件地址彼此不相等时，我希望收到一条消息说明这一点。

email: {
            required: true,
            email: true,
            minlength: 4
        },
         email_again: {
        equalTo: '#email'
        },

有人可以帮忙吗？

还有一些其他的:如果用户忘记勾选 Mr 或 Ms 的单选按钮之一，则会出现一条消息，表明这是必需的，但单选按钮已经消失。

          autosize(document.querySelectorAll('#message_content'));

        
      



 var validator = $("#comment_form").validate({
 ignore: [],
    rules: {
        gender: {
            required: true,
        },
        first_name: {
            required: true,
            minlength: 2
        },
        last_name: {
            required: true,
            minlength: 2
        },
        email: {
            required: true,
            email: true,
			minlength: 4
        },
         email_again: {
		equalTo: '#email'
		},
        message_subject: {
            required: true,
			minlength: 2
        },
        message: {
            required: true,
			minlength: 4
        },
        hiddenRecaptcha: {
            required: function () {
                if (grecaptcha.getResponse() == '') {
                    return true;
                } else {
                    return false;
                }
            }
    }
  }
 });

html{
		text-align:center
		}
		
body {
    display: inline-block;
    margin: 0px auto;
     text-align:left; 
}
	#comment_form {
		width:302px;
		}
		
	.label-radio{
			font-size: 0.8em;
			color:#d8e3e6;
			margin-right: 10px;
			font-family:questrial;
			
		}
		
.inputfield3 {
 height: 33px;
  max-height: 33px;
 width: 302px;
 border-radius: 16px;
 margin-top: -10px;
 margin-bottom: 17px;
 padding: 0px 10px 0px 10px;
  overflow: hidden;
 border: none;
 background-color: #ffffff;
 display: inline-block !important;
 font-family: questrial;
 font-size: 0.8em;
 }

.inputfield2 {
 height: 33px;
  max-height: 33px;
 width: 302px;
 border-radius: 16px;
 margin-top: -10px;
 margin-bottom: 0px;
 padding: 0px 10px 0px 10px;
  overflow: hidden;
 border: none;
 background-color: #ffffff;
 display: inline-block !important;
 font-family: questrial;
 font-size: 0.8em;
 }

.textareafield {
  max-height: 350px;
  width: 302px;
  max-width: 302px;
  border-radius: 16px;
  margin-top: -10px;
  margin-bottom: 17px;
 padding: 10px 10px 10px 10px;
  overflow: hidden;
 border: none;
 background-color: #ffffff;
 display: inline-block !important;
 font-family: questrial;
font-size: 0.8em;
}
		#g-recaptcha-outer{
            width: 302px;
            height: 72px;
            display:flex;
            justify-content:center;
            align-items:center;
            overflow: hidden;
            border-radius: 16px;
            margin: -10px auto 20 auto;
          }
		  
		  #recaptcha-header{
            margin: 30px 0px -15px 0px;
            color:#d8e3e6;
            font-size: 1.0em;
			font-family:questrial;
			font-size:0.8em;
			letter-spacing: -0.03em;
          }

		 
	 #contact_submit_button{
            display: block;
            text-decoration: none;
            margin: 10px auto 80px auto;
            width: 230px;
            height:33px;
            padding: 0px 15px 0px 15px;
            background-color: rgb(0, 157, 233);
            color:#ffffff;
            border-radius: 16px;
            border: none;
            outline: none;
			font-family:questrial;
			font-size:1em;
			
	 }
	 
	 .requiredmark {
		margin:0px 0px 0px 295px;
		display: inline-block;
		color: #d8e3e6;
		padding:20px 0px 0px 0px; 
		}
		
		 .requiredmark2 {
		margin:-39px 0px 0px 295px;
		display: inline-block;
		color: #d8e3e6;
		padding:20px 0px 0px 0px; 
		} 
		.requiredmark-radio {
		margin:20px 0px 0px 0px;
		display: inline-block;
		color: #d8e3e6;
		font-family:questrial; 
		}
		

.error{
			display: none;
		}		
		
		.error_show{
			color: red;
		}
		
		input.invalid, textarea.invalid{
			border: 1px solid red;
		}
		
		input.valid, textarea.valid{
			
		}

label.error {
	margin-top:-10px;
	margin-bottom:30px;
   float: none;
   color: red; 
   vertical-align: top; 
   display: block;
   font-family: Questrial;
}​


#hiddenRecaptcha-error {
margin-top:65px!important;
margin-bottom:30px;
   float: none;
   color: red; 
   vertical-align: top; 
   display: block;
   font-family: Questrial;
}​

.gender { border-radius: 16px; margin-top: 5px; margin-bottom: 7px; padding: 0px 10px 0px 10px; overflow: hidden; border: none; background-color: #ffffff; display: inline-block !important; font-family: questrial; font-size: 0.8em; }

#gender-error { float: right;  margin-bottom:0px!important; margin-top:20px!important}

.errMsg{
	color:#ffffff;
}

<html>
 <head>
 <script src='https://www.google.com/recaptcha/api.js'></script>
<script src="https://assets.webshopapp.com/photographycoursetour/autosize.js?2" type="text/javascript"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
 <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.js"></script>
 <script src="{{ 'iframeresizer-min.js' | url_asset }}"type="text/javascript"></script>
 <script src="https://assets.webshopapp.com/photographycoursetour/iframeresizer-contentwindow-min.js" type="text/javascript"></script>
 <style> 
@font-face {
   font-family: Questrial;
   src: url(Questrial-Regular.otf);
}

div {
   font-family: Questrial;
}

input {
   font-family: Questrial;
}

text-area {
   font-family: Questrial;
}

span {
   font-family: Questrial;
}

p {
   font-family: Questrial;
}

form {
   font-family: Questrial;
}
</style>

 </head>

 <body>

 <form id="comment_form" action="form.php" method="post">

 <div class="compulsoryfield">
<input class="gender" type="radio" name="gender" value="Mr" required><label class="label-radio">Mr.</label>
<input class="gender" type="radio" name="gender" value="Ms" required><label class="label-radio">Ms.</label>
<span class="requiredmark-radio">*</span>
</div>

 <div class="compulsoryfield"><span class="requiredmark">*</span>
<input id="first_name" name="first_name" class="inputfield3" type="text" placeholder="first name" required>
</div>

<div class="compulsoryfield"><span class="requiredmark2">*</span>
<input id="last_name" name="last_name" class="inputfield3" type="text" placeholder="last name" required>
</div>

<input class="inputfield3" type="text" name="company_name" placeholder="company name (if applicable)">
<input class="inputfield3" type="text" name="customer_number" placeholder="customer number (on invoice if available)">
 <br>

 <div class="compulsoryfield"><span class="requiredmark">*</span>
<input id="email" name="email" class="inputfield3" type="email" placeholder="email address" required>
 </div>

 <div class="compulsoryfield"><span class="requiredmark2">*</span>
<input id="email_again" name="emai_again" class="inputfield3" type="email" placeholder="re-enter email address to confirm" required></div>


  <input class="inputfield3" type="text" name="telephone_number" placeholder="telephone number (country code included)">
  <br>
  <div class="compulsoryfield"><span class="requiredmark">*</span>
   <input id="message_subject" name="message_subject" class="inputfield3" type="text" placeholder="subject of message" required>
   </div>

   <div class="compulsoryfield"><span class="requiredmark2">*</span>
   <textarea id="message_content" name="message_content" class="textareafield" type="text" placeholder="add your message here" rows="8" cols="39" required></textarea></div>


   <p id="recaptcha-header">before sending, please show us you're real:</p>

   <div><span class="requiredmark">*</span>
   <div id="g-recaptcha-outer" class="compulsoryfield2">
  <div class="g-recaptcha" data-sitekey="mykey" required></div>
  
 </div>
<input type="hidden" class="hiddenRecaptcha required" name="hiddenRecaptcha" id="hiddenRecaptcha">
 <br><br>
 <input id="contact_submit_button" type="submit" name="submit" value="SEND" onclick="myFunction()">

  </form>
  
<div class="errMsg">Please click on the Recaptcha box.</div>


   
</body>
 </html>

Answer 1

发现问题。抱歉，是我的草率行为。

<input id="email_again" name="emai_again"

应该是

<input id="email_again" name="email_again"