在字段中输入有效电子邮件时显示 div 内容答案

【问题标题】：Show div contents when a valid email is entered in field在字段中输入有效电子邮件时显示 div 内容
【发布时间】：2020-01-08 14:21:40
【问题描述】：

所以我试图仅在输入有效的电子邮件地址时才显示表单。

<p>Email:</p>
<input name="User_Email" type="text"/>
<div id="outform">
    <p>Company Name:</p>
    <input type="text" name="CompanyName"/>
    <p>Website:</p>
    <input type="text" name="Website" />
    <input type='submit'>
</div>

我首先得到了表单的其余部分，如果该字段中有一个值，则显示如下：

<script>
    $('input[name=User_Email]').keyup(function(){
         if($(this).val().length)
           $('#outform').show();
         else
           $('#outform').hide();
    });
</script>

按预期工作，然后我尝试了这个我无法开始工作：

<script>
    if $('input[name=User_Email]').is(':valid') { 
      $('#outform').show();
    else
      $('#outform').hide();
    }
</script>

如果有人可以帮助我理解这没有达到 .is(':valid') 子句，那将非常感谢。

【问题讨论】：

请正确格式化（缩进）您的代码。这是对您的志愿者的礼貌，也是一种良好的做法。

标签： jquery html show

【解决方案1】：

首先，您应该在input中添加required属性

这样

<input name="User_Email" type="text" required/>

更多细节你可以阅读https://css-tricks.com/almanac/selectors/v/valid/

其次，你这里的语法不正确line 1

if $('input[name=User_Email]').is(':valid') { 
 $('#outform').show(); // line 1
else // line 2
    $('#outform').hide(); // line 3
} // line 4

它应该在line 1 之后关闭而不是line 4 这里

if $('input[name=User_Email]').is(':valid') { 
 $('#outform').show(); } // line 1
else // line 2
    $('#outform').hide(); // line 3
 // line 4

下面的现场演示以检查结果。

更新

将电子邮件字段的类型从 text 更改为 email

input name="User_Email" type="email" required/>

你也可以像rneviu's answer一样使用Regex

function validateEmail(email) {
        var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
        return re.test(String(email).toLowerCase());
    }

// Should hide default
$('#outform').hide();

$('input[name=User_Email]').keyup(function(){
    var isValid = $(this).is(':valid') && validateEmail($(this).val());
 
    if (isValid)
     $('#outform').show();
    else
     $('#outform').hide();
});

function validateEmail(email) {
    var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(String(email).toLowerCase());
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Email:</p>
<input name="User_Email" type="email" required/>
<div id="outform">
    <p>Company Name:</p>
    <input type="text" name="CompanyName"/>
    <p>Website:</p>
    <input type="text" name="Website" />
    <input type='submit'>
</div>

【讨论】：

嗨，这个答案提供了与我已经拥有的相同的输出，只要我在字段中输入任何字符，它就会显示其余的来自，我希望它只显示整个电子邮件已显示.. 因此，如果我输入 user@website.com，则只有在输入有效电子邮件后才会显示该表单。上面的答案显示了我输入单个字符时的形式
是的，required 属性只检查长度而不是 email 格式。如果您需要验证电子邮件，您应该添加type="email" 属性，它会工作正常。
我刚刚更新了我的答案，请看@bbowesbo
这更接近了，我们将如何更改它以便表单显示在第二个字符串上，在 @ 之后且仅在 '.' 之后，上面显示在 user@t - 所需的输出将从 user@test 显示。
为了清楚起见，对于 user@website.com，上面的 user@w 显示了表单，我试图让它只在 user@website 时显示表单。

【解决方案2】：

替换你的html。

<input name="User_Email" type="email" required />

【讨论】：

【解决方案3】：

if(!(/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(this.User_Email))){
this.show = true;
}

使用上述模式并显示div if this.show == true;

【讨论】：

【解决方案4】：

将您输入的内容与模式匹配（电子邮件）

<script>
 $('input[name=User_Email]').keyup(function(){
  var pattern = /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/; 
  if($(this).val().match(pattern))
   $('#outform').show();
  else
   $('#outform').hide();
  });
 </script>

【讨论】：