电子邮件验证 - HTML答案

【问题标题】：Email Verification - HTML电子邮件验证 - HTML
【发布时间】：2016-11-23 08:04:50
【问题描述】：

抱歉，如果有人问过这个问题，我似乎找不到完全相同的问题，所以就这样吧。

我在 html 中创建了一个表单，我基本上希望该表单查看用户输入的电子邮件地址，然后必须重新输入，但如果不匹配则标记。

<form>
  <div class="input-container">
    <input type="text" id="Username" required="required"/>
    <label for="Username">@Username</label>
    <div class="bar"></div>
  </div>
  <div class="input-container">
    <input type="email" id="email" required="required"/>
    <label for="email">Email</label>
    <div class="bar"></div>
  </div>
  <div class="input-container">
    <input type="email" id="Repeat email" required="required"/>
    <label for="Repeat email">Repeat Email</label>
    <div class="bar"></div>
  </div>
  <div class="button-container">
    <button><span>Next</span></button>
  </div>
</form>

$('.toggle').on('click', function() {
  $('.container').stop().addClass('active');
});

$('.close').on('click', function() {
  $('.container').stop().removeClass('active');
});

任何帮助都将不胜感激，在表单方面，请把我当作一个完全的新手。

【问题讨论】：

id里面不能有空格，用javascript检查#email值是否和#repeat-email一样

标签： html forms email containers required

【解决方案1】：

请对您的代码和脚本进行一些更改。我认为下面的代码可能对您有用。

<head><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {

$("#email").change(function() {

        var pass = $("#Repeat").val();
        var email = $("#email").val();
        if (pass === email) {
            $(".bar1").html("email match");
        }
else {
            $(".bar1").html("<span style='color:goldenrod;font-size: 11px;margin-left: 21px;font-family: Arial,Helvetica,sans-serif;'>email does not Match.</span>");
        }
    });
$("#Repeat").change(function() {
var pass = $("#Repeat").val();
        var email = $("#email").val();
        if (pass === email) {
            $(".bar2").html("email match");
             $(".bar1").hide();
        }
        else {
            $(".bar2").html("<span style='color:goldenrod;font-size: 11px;margin-left: 21px;font-family: Arial,Helvetica,sans-serif;'>email does not Match.</span>");

        }
    });

});
</script>
</head>

并在您的 html 部分进行一些更改，例如更改类名和 id，如下所示。

<form>


<div class="input-container">
 <input type="text" id="Username" required="required"/>
<label for="Username">@Username</label>
<div class="bar"></div>
  </div>
<div class="input-container">
<input type="email" id="email" required="required"/>
<label for="email">Email</label>
<div class="bar1"></div>
</div>
<div class="input-container">
<input type="email" id="Repeat" required="required"/>
<label for="Repeat email">Repeat Email</label>
<div class="bar2"></div>
</div>
<div class="button-container">
<button><span>Next</span></button>
</div>
</form>

【讨论】：

请提供一些关于如何解决问题的解释，以便阅读此页面的其他人能够理解上下文。谢谢！

【解决方案2】：

$(document).ready(function() {

$('#myform').validate({
    rules: {
        'entry[email]': {
            required: true,
            minlength: 5
        },
        field2: {
            equalTo: '[name="entry[email]"]'
        }
    },
    submitHandler: function(form) { // for demo
        alert('valid form');
        return false;
    }
});

});

Check here

【讨论】：

stackoverflow.com/questions/5147438/…
我添加了这个 JS 代码，但是将 '#myform#' 更改为 '#form'。但它什么也没做。
你添加了j查询吗？
在添加这样的内容时，我完全是新手。所以我不知道在哪里添加什么。
编辑您的帖子并重新添加