电子邮件验证 - HTML

Question

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

我在 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>

JS

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

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

任何帮助将不胜感激，请将我视为表格方面的完全新手。

Answer 1

$(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

Answer 2

请对您的代码进行一些更改，script.I认为以下代码可能对您有用。

<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 部分进行一些更改，例如更改 class 名称和 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>

电子邮件验证 - HTML

Email Verification - HTML

html

forms

email

containers

required